別冊webメモ

自分用リファレンス&アウトプット

3年ぶりのコーディングで参考にしたサイト

3年ぶりにコーディングしたら、設定から記述の仕方までいろいろ忘れていたのでググりながら書きました。

HTML

<head>

HTMLのheadの書き方、head内に記述する要素の総まとめ
https://coliss.com/articles/build-websites/operation/work/list-of-head-elements.html

もう逃げない。HTMLのviewportをちゃんと理解する
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

レスポンシブデザインで気をつけたい、電話番号の扱い
https://qiita.com/emegane/items/bacdb2eaf9e1e7104720

ウェブ管理者向けシェア機能ガイド Open Graphマークアップ
https://developers.facebook.com/docs/sharing/webmasters#markup

【2019年版】Twitterカードとは?使い方と設定方法まとめ
https://saruwakakun.com/html-css/reference/twitter-card

【2019年版】ホームページのタブ画像(favicon/touch-icon)作成と設定方法まとめ
https://homepagenopro.com/html/favicon.html

Facebookシェア・Twitterシェアに最適な画像サイズとOGP設定
https://www.sakurasaku-labo.jp/blogs/facebook-og-image
 

CSS

2019年版!おすすめのリセットCSSまとめ
https://webdesign-trends.net/entry/8137

2019年流行?font-familyのオススメ設定はこれ!【CSS
https://anyushu.com/web/fonts-osusume/

日本語フォントこそ指定したい自動カーニング
https://ics.media/entry/14087/

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
https://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html

CSS における clearfix と flexbox の使い分け
https://www.bokukoko.info/entry/2018/08/11/231658

CSS Flexbox の基礎知識と使い方を詳しく解説
https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

まだfloat使ってる?CSSのFlexboxを徹底解説!
https://webdesignday.jp/inspiration/pickup/4175/

CSSでリストから表を作る方法!flexプロパティを使えば2列、3列、4列のレイアウトは簡単過ぎる!
https://tabibitojin.com/css-flex-property-column-layout/

コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
https://grow-group.jp/archives/2674/

リスト(箇条書き)のアイコンを画像にする
https://gray-code.com/html_css/setting-image-for-icon-of-list/

CSS】見出しや文章の先頭に画像を入れる【行頭を揃える】
https://into-the-program.com/html/title-before-image.php

もう悩まない。CSSでレスポンシブなtableデザイン&コーディング
https://b-risk.jp/blog/2018/07/table-css/

MEDIA DAY:SESSION5,6レポート #MDT2018

CINRA主催のメディアカンファレンス『MEDIA DAY』の「New Business」と「Empowerment」を聞いたレポートです。

<INDEX>

mediadaytokyo.jp
 

【SESSION5】 New Business

スピーカー
 大熊 信(cakes編集長)
 西尾 崇彦(株式会社晋遊舎 代表取締役社)
 青木 耕平(株式会社クラシコ代表取締役
モデレーター
 モリ ジュンヤ(CINRA,Inc.代表取締役

■cakesについて

https://cakes.mu

月間250万UUのデジタルコンテンツ配信プラットフォーム。編集者4名、エンジニア2名。
500円/月のサブスクリプションモデルで、過去記事含め2万記事を読むことができる。
「嫌われる勇気」「やれたかも委員会」などcakes発のヒットコンテンツもでてきている。
会員数万人×500円の売上と、クライアントワーク、otherで収益化。

クリエイターへの還元は「よく読まれた」記事ほど高いが、PVがとれていなくても、有料会員獲得につながるクリエイターもいるので、ヒットだけは追いかけない。

出版業界とのつながりの強さが、ビジネスモデルをささえている。
今は出版不況で、出版社が広告費をだせない。そこで、cakesで発信して、本を売るビジネスを出版社と行っている。cakesは親会社がないのでしがらみがなく、出版社にコンテンツを提供してもらえている。また、(ファッションやライフスタイルといった)メディアのジャンルをつくらなかったところが強みにつながっている。

テキストのサブスクリプションは収益化が難しく、参入障壁がかなり高い。
cakesはサブスクを始めたタイミングがよく先行者になれ、黒字化までの期間を長めに待ってもらえたので続けられた。
現在は、noteで発掘して、cakesで収益化する構造ができている。
映画化など、大きな企画を今後はやっていきたい。

晋遊舎について

http://the360.life/

「MONOQLO」「LDK」などテスト誌(商品テストのレビュー)を発行。社内に専用のテストラボを建設中、大学の研究室とも組んで誌面をつくっている。
消費行動に対して、あらゆるジャンルの雑誌をだしている。編集者60名ぐらいで、定期購読者は少なく、主戦場はコンビニ。dマガジン、Smartnewsでもランキングの常連。今年、デジタルの売上が雑誌を上回った。

検索してもなかなかでてこない、実際にさわった情報をのせているのが強み。商品は半分以上買っている。
今は物を買うのに、ネットで調べるは常識。意外とリアル店舗に行っても商品についてきける人がいない。シンプルに情報が分かる場所を提供している。
無印など出せば必ずヒットする記事はあるが、それだけに頼りすぎず、担当者が本当に出したいコンテンツかどうかを重視している。

一般的にテスト誌は運営しているうちに、社会派な内容になってしまう傾向があるが、アジア全般的に、社会派な内容よりエンタメのほうがうけるため、バランスに気をつけている。

クラシコムについて

https://hokuohkurashi.com/

雑貨のECサイト「北欧暮らしの道具店」を運営。
ECは広告で新規ユーザーを獲得するパターンが多いが、「北欧暮らしの道具店」は広告への投資を減らし、メディアを育てている。メディアにくるユーザーの方が多く、ECコンバージョンは低いが、母数UUが大きいのでのびている。小売の他に、メディアへ広告がはいっている。物販とセットで広告できるのが強み。
22億の売上。物販にメディアを取り入れることで、ゲーム並みの収益構造がつくれている。PVあたりの換金効率が良い。

メディアは客観・公平性が求められるが、「北欧暮らしの道具店」は、基本的にはお店という立て付けのため、主観を編集できる。(店長のおすすめ視点ですべて編集できる)
できるだけ狭い価値観で深く刺さるといった、インターネット上でのビジネスを成功させている。「みんなのためのもの」ではなく、「自分たちへのもの」が、商業パブリッシャーではなかなかできないので、それができているのが強み。

この世界観のコンテンツ制作は、ほぼ9割を社内で作成している。外部に出すときもスタイルを作るところは社内で徹底してやっている。
編集経験者に主観で書いてもらうほうが(やり方が普通の編集と違うため)コストがかかるので、編集経験のないセンスのある人達を採用し、社内で教育している。
未経験者の適正判断は、ほとんどは採用で解決、20%を教育で解決。年間で1000人応募→15人採用、採用も自社サイトからの応募なのでほとんどが元読者からの応募、世界観に共感してくれている。
採用テストは、40分間でスタイリングして写真をとってもらうもの。頭の中にビジョンがあるかどうか、それが「北欧暮らしの道具店」のスタイルとあっているかをみる。技術はあとで教育できる。採用後は、半年メンターをつけてひたすら教育だけをする。しっかり時間を掛ける。
道具も一流のものをあたえる。それが問題解決として一番早い。

PVなど計測はしているが、コミットはしていない。
みんなが読みたいではなく、自分が読みたいものを書け、の方針でやっている。
数字だけではない、振り返りのミーティングを定性的にやっている。

今後は、小売とメディアの上のレイヤーとして、興行ビジネスをやっていきたい。オリジナルドラマ制作にチャレンジ中。初回は70万再生を達成。
本や音楽のジャンルはニッチとマスが協業しているが、映像は配給なのでニッチがない。映画をつくり、このスタイルの映画ならうちといわれるような、レーベルをつくっていきたい。

【SESSION6】 Empowerment

スピーカー
 植原 正太郎(greenz.jp 事業統括理事)
 工藤 瑞穂(NPO法人soar代表理事・ウェブメディア「soar」)
 平山 潤(NEUT magazine(Be inspired!)編集長)
モデレーター
 浜田 敬子(BUSINESS INSIDER JAPAN 統括編集長)

 

greenz.jpについて

https://greenz.jp/

2006年にスタートした、20万UU/月のソーシャル(社会課題解決)メディア。
日本中に、「ほしい未来は、つくる」人を増やすことをミッションに運営している。
社会に疑問をなげかける記事が、よく読者へ届いている。人物をストーリーに乗せて伝えるのが一番強いコンテンツ。

メディア運営の他に、ワークショップやトークショーといったイベントを開催。
イベントをやりたい読者と一緒に、イベントをつくって全国に広めている。今までに110箇所/日本で実施。

寄付会員は945名で年間1000万円ほど集め、300本の記事中120本が寄付金を原資にして書かれている。価値観を中心に発信しているので、そこに共感しているユーザーが集まる。
読者のgreenzへの関わり方がステップで設計されており(読む→イベントに参加する→一緒につくるといったような)自発的にユーザーが動いてくれる。

NPO法人なので、PVはビジネスと紐付いておらず追っていない、メディアとして大きくする目標はないが、巻き込む人はふやしていきたい。

■soarについて

https://soar-world.com/

困難がある人をインターネットを使ってサポートしていくウェブマガジン。
障害や病気が理由でなかなか人のつながりができない、家から出れない、そんな人とインターネットで繋がり、励ましを届けることができるネットをつくりたい。
気持ちをエンパワーメント+実際の助けになることを目指している。

読者を広げるために、一般的なメディアではターゲットを狭くしていく流れがあるなか、困難というキーワードで、障害者だけに絞らず、格差がある人、LGBT、高齢者など横断的にユーザーをとっていっている。35万UU/月 Searchからのトラフィックが多い。寄付会員は450人ほど。

気をつけているトンマナとして、困難がある人でも友達を紹介するように書いて紹介している。
メディアでありNPO法人であるので、PVなどのKPIは持っておらず、支援になれば最悪soarだと認識されなくてもよいと考えている。

■NEUTについて

http://neutmagazine.com/

社会問題を伝える上でどういうアクションがあるのか、人にフォーカスして届けるマガジン。(来月から名前を変えて活動する)10万UU/月 30-40代読者が多い。感度の高い人が読んでいる。ニュートラルな視点を日本人が持とう、ということを伝えていきたい。
リニューアル前から毎月トークイベントをおこなっている。

横に読者を広げるために、記事では難しい言葉をつかわない、離脱しないように誰でもわかる言葉で書くようにしている。ミレニアルズやサスティナブル、エシカルなどといった言葉は使わない。そういったキーワードはなるべく使わずに、原体験(ストーリー)に視点をあてる。
はじめて社会に出す意見の切り口や、ネタの発掘力がメディアにもとめられている。

若い人に響かせるためにはビジュアル(写真)が大事。
メディアのテーマは強いが、オーガニックの流入が一定以上ある。写真にこだわって、タイトルをわかりやすくすれば、みんな気になって入ってきてくれる。
ファッションやカルチャーの奥にある、社会問題へ気づきのきっかけを、ユーザーが好きそうなビジュアルでしかけて伝えている。入り口にはなるべく社会問題をつかわない。ポジティブに届け、クリエイティブに解決しているようにみせる。

今は出資してもらって運営している、これから広告をとっていく予定。マネタイズが一番の課題。


===

どこのメディアもマスにウケるものだけではなく、編集者自身が読みたくてこれを出したいコンテンツを大事にしている印象だった。あたり前のことだけど、数字を追いかけるうえでマスな記事も必要だが、同時に理想的なコアファンをつくっていくコンテンツも大切で、育てていくべきだと思った。

CSSnite Shift11:Webデザイン行く年来る年 #cssnite

昨年末に行われた、CSSnite Shift11(Webトレンド総まとめ回)のサマリーです。

<INDEX>
http://cssnite.jp/lp/shift11/
[▶] 動画

Shift11:Webデザイン行く年来る年(CSS Nite LP55)

【基調講演】今までの10年。これからの10年。

長谷川 恭久
[▶] https://vimeo.com/247642918/a243313e2d

iPhone登場から10年、スマホの登場で価値観が大きく変わった

2007年(10年前)
iPhoneが誕生した年。IE6、 Flash全盛の時代
・サイトを作ったことが成果になっていた時代
・サイトをじっくりみていた時代

2009年からの2年間でgoodプラクティスが
badプラティクスになってしまうことも起こるような、大きな変化があった
→PCとスマホのシェア逆転

2017年
・つくっただけでは意味がない、ビジネスに貢献しないといけない時代
→売上、ブランディング。「自己表現のWeb」から「ビジネスのWeb」へ
・ユーザーの使い方を決め付けられない時代
→たくさんのデバイス接触時間の増加
・サイトをじっくり見なくなった時代
→情報が身近になり、スマホをひらいたらすぐ答えがある、があたりまえに
・認知の入口がSNSになっている
→昔はサイトの表現を派手にして認知してもらっていたが、
入り口がSNSになり、webは比較・検討や行動を促す場となった

今後10年でどうなる?
WEBブラウザでサイトをみる、という概念がなくなるのでは
→PWA(progressive web apps)での配布
→VOICEデバイス の普及
→インターネットにつながるデバイスがどんどん出てくる

今からできる3つのこと
・情報設計
今後増えるさまざまなデバイスに単純に対応していくだけではなく、
どういった文脈で使用するのか、ユーザーの行動を考えたコンテンツ配信・情報設計を学ぶ

・長方形のデザインからの脱却
長方形画面ではないデバイスもでてくる
理想的な見せ方に固執せず、極端に崩れない設計を考える

・デザインの言語化
協業ののためのスキル
感覚的に片付けていたことを言葉にすることが重要

テクノロジーは止まらない、今までの概念を壊してでも進まなければならない

マークアップ】2017年のマークアップの話題を総まとめ

小山田 晃浩(ピクセルグリッド)/久保 知己(まぼろし
[▶] https://vimeo.com/247643257/50306ddd1b

ブラウザ
IEのボーダーラインが11に
2017/4/11 Windows Vistaサポート終了
Edgeは内部バージョンが16に
Flashの本格的な廃止
・全ページhttpsにしましょう

HTML
HTML5関連に大きな動きはなし
・廃止勧告案の提案が出ている(ほぼ通りそう)
UTF-8を利用しましよう

CSS
CSS Gridが最新ブラウザで利用可
IEは古い仕様のCSS Gridなので注意
iPhone Xランドスケープ対応もしましょう

JavaScript
jQueryはブラウザでできるように
・Reactに次いでVue.jsの人気が躍進

Tools
・HTML Preprocessorは環境にあわせて
・バンドラーはとりあえずwebpack

【アドビ】これだけ押さえればOK!Adobeのツールを最大限活用するWebデザイン手法2017

浅野 桜(タガス)/黒野 明子(crema design)
[▶] https://vimeo.com/247643977/3cbb2a7dfc

XD CC
・2017年10月正式版リリース
ほぼ毎月アップデートがかかる。だいぶ現場で使えるレベルに
スマホのXdアプリで実機確認も可能
・今年はXdの年

Dimention CC
・カンタンに3Dのデザインができる

Capture CC
・写真を撮るとTypekit中から近しいフォントを教えてくれる
・デジタルアセットの作成

Photoshop CC 2018
・デバイスプレビュー消滅>Xdを使いましょう

Illustrator CC 2018
・バージョン22.0のバグフィックス
・プロパティパネル登場
・アートボード1000枚まで作成&整列が可能に
・テキスト自体がライブラリに保存可能に

アクセシビリティアクセシビリティ 改め インクルーシブデザイン?

植木 真(インフォアクシア)/土屋 一彦
[▶] https://vimeo.com/247644483/1c95092ed7

インクルーシブデザインに取り組みましょう
・高齢者や障害がある人など、特別なニーズを抱えた消費者をデザインプロセスの上流工程へと積極的に巻き込んでいく手法
・特定の障害のある人の話ではない、みんなのためのもの

Inclusive Design Principles
http://inclusivedesignprinciples.org/ja/
→ 同等の体験を提供する
→ 状況を考慮する
→ 一貫性を保つ
→ 利用者に制御させる
→ 選択肢を提供する
→ コンテンツの優先順位を付ける
→ 価値を付加する

・欧米では法律でウェブアクセシビリティを確保することの義務化がスタンダードに
・最低限の原則。基準をクリアした上で便利なものをつくりましょう

2018年のアクセシビリティ界隈
・WCAG2.1 勧告へ
アクセシビリティがUXの基本として不可欠という価値観がより根付く
・ニーズが高まる今だからこそ「アクセシビリティもできる」が差別化&競争力に

マーケティング、解析】マーケティングの矛盾:事例で振り返る2017年のウェブマーケティング

益子 貴寛(まぼろし)/安達 里枝(スマイルファーム)
[▶] https://vimeo.com/247644790/5d042eb03a

マーケティングされたくない
・ユーザーの広告を無視する力が向上中
・今までの自社都合のマーケティングが嫌悪感をうんでいる

心にフィットする広告を
・ユーザーの都合を考えたマーケティングは受け入れられる
・自社都合だけでゴリ押ししない

態度変容をおこすための6つのポイント
・時間帯
・場所
・気分
・お役立ち
・絞込
自己実現

炎上マーケ
・狙っていなくても、些細なきっかけで炎上
→ペルソナにモニタリングしてもらいましょう
・炎上をねらう?
広告効果に換算したら数億円かも知れないが、元の目的に対して役に立ったのかは疑問

余談:クリテオ(動的なリマーケティングを配信している会社)の株価が大暴落
safariに実装されたトラッキング防止ツールの回避策がなかったため

【フォント】フォントまわりのトレンド2017

鷹野 雅弘(スイッチ)/関口 浩之(ソフトバンク・テクノロジー
[▶] https://vimeo.com/247646684/79db28a7c8

話題の2017年フォント
・筑紫Q明朝 デビュー
・源ノ明朝 「ビャンビャン麺」がリガチャで打てる
・貂明朝 貂の絵が字形で登録されている
・絵文字のハンバーガーのチーズの位置が話題に

最近出てきた手書き風デザイン書体
・パルラムネ
・つばめ
ミウラゴチック プロポR

最近出てきたアナログ風味、オールド系
・筑紫Q明朝
・秀英にじみ明朝 Std L
・A1ゴシック Std M
・貂明朝

Illustrator CC 2018
・カラーフォントに対応
・絵文字は、肌の色にもリガチャで対応

テキスト表現トレンド
・テキストにグラデーション
・チカラワザ・スウォッシュ

・装飾でがんばるのではなく、世界観にあった適切なフォントを選ぶ
・フォントは情報を的確に伝えるための重要なUI/UX

スマホUIトレンド】スマホアプリにおけるUIデザインのトレンド2017

佐藤 洋介(サイバーエージェント
[▶] https://vimeo.com/247646933/6bdff7f478

2017年UI業界トピックス
・iOS11登場>Appstoreデザイン刷新、Animoji登場など
・AR>iOS11になってARKit本格始動
スマートスピーカー
・LIVEコマース>メルカリチャンネル、Live Shop!(10代向け)

制作環境の変化
・ZEPLINと、SKETCHやPhotoshopを組み合わせて開発
・ProtoPie、Origami Studioなど
タイムライン制御で詳細なアニメーションまで試せるプロトタイプツール

▽サービスデザインの今後
スマホ習慣の変化
Apple Payなど決済機能がスマホに含まれ接触機会が増える
・「テレビの時間」が「スマホの時間」に
UIの進化
GoogleがVoice User Interface Designerを募集
AppleもSiriデザイナーを募集>音声UIに注目

サービスデザイナーに求められる「力」
・世の中の変化に気づき「柔軟に対応する力」
・トレンドを「自分なりに解釈する力」
・常に進化するユーザーリテラシーを「甘く見ない力」
・作業を効率化した分を「クオリティに昇華する力」
・未知の領域でもベーススキルを活かせる「応用力」

【Webデザイントレンド】Webデザイントレンド祭り 2017 - 次の10年のはじまり

原 一浩(Greative.GK)/矢野 りん(Baidu)/坂本 邦夫(カラー&Webデザイン フォルトゥナ)
[▶] https://vimeo.com/247648506/ed33bcf480

この回のトレンドの定義
・トレンドとは最先端ではない、時代に最適化されつつある現象である
・海外話題サイトおよび過去のリニューアル、グローバル500社のサイト400サイト、地方自治体県市町村1700サイト、上場企業サイト3400サイトを観察した結果

2017年デザインキーワード
・とにかく動く

2017年の方向性
・アニメーション自体でコンテンツをみせるというより、雰囲気づくり
・国内では、短い言葉の使われ方に重点が置かれる
・上場企業は保守的で、自治体は試行的

▽海外表現まわりトピックス
ピクニックシート
・敷物をしく感じでコンテンツが表示される演出
・てっとり早くてダイナミック、2017年とにかく多用されている
ロシアンデザイン
・注目度が上がった、スケールが大きめ
WebVR
・2017年、WebVR元年?

▽海外機能周りトピックス
フチ勢
・囲い幅いっぱいでフチをつける、コンテンツの真ん中に目線があつまる
・デバイスにフチがなくなってきたのも影響?
ランドスケープモード
・画面の向きを強制される
→横である必然性がないUI的には推奨しない

▽上場企業トピックス
銀行系自治体サイト説
自治体っぽい感じでモダンにリニューアル
エモコピ
・大きなメインイメージと気持ち的なことを言うシンプルなコピーというパターン
・しかし、シンプルな一文がかえって伝わりにくいケースが...
サイドバーリターンズ
・一時期、横一直線のレイアウトにとってかわられたが復活してきている
タブレットで指の届く範囲で採用?スマホのときはたたまれるパターンが多い

自治体トピックス
・街にキャッチコピーをつけるパターン
次の動き
・地域ブランディングテクスチャ、フッター多重など

言いたいことは短く、大きな字で
・画像・動画中心のファーストビューは加速中、1画面上のテキスト量はどんどん減っている、
少ない文字をいかに読ませて理解させるか

2017年アシスタント戦争(スマートスピーカーが台頭)
・ユーザーが、コンテンツや製品を手に入れる(目標達成する)ための「文脈」を獲得する戦い
→10年後のサイトはシズル感ある写真+チャットボットのような形になるかも
その時求められる「メディア制作力」は
・フライトアテンダントのようなガチの接客力(相手が何を求めているか万全と理解する能力)
・写真家や映画監督なみの視覚を切り取るクリエイエティブ力(質の高い画)
・聴力に訴える演奏力 or 声の力(品質の良い聴くコンテンツ)

【クロージング】今までの10年。これからの10年。(エピローグ)

中川 直樹(アンティー・ファクトリー)
[▶] https://vimeo.com/247649577/d9b6ab3906

2010–2011年
・表現力重視のリッチなプロモーション
SNSを活用したバズ意識の仕事が多かった

2017年
・プロセスをデザインする、ビジネス的な結果を求められる仕事が中心に
・キチンとブランディングをやろうとする企業が増えた

2010年を堺に、Webマーケティングからデジタルマーケティングに変化

2018年以降、Web従事者に求められる範囲は広がっている
・時代に求められる技術者、スペシャリストを育成、獲得
・企業やサービス、ビジネスのデザインをサポートする能力
・先の時代も他社より秀でる「仁義なき施策」



年末のShiftに参加すると、Webのトレンド情報を一気にアップデートできるので良い。講演の中でも度々取り上げられた「音声」コンテンツは次に来そうだなと感じました。