WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

WCAN 2016 Spring 「2016年web配色のイロハ」

森本です。

私は、WCAN 2016 Springのセッション1「2016年web配色のイロハ」の内容と感想を書かせていただきます。

このセッションでは主に、

  1. シンプルになった配色
  2. トップページよりOGP画像
  3. テキストは黒く、大きく

この3つのことがお話しされていました。順に振り返りたいと思います。

シンプルになった配色

webサイトを見る端末の画面サイズが、技術の進化によりどんどん小さくなっていきました。それによって色の置く場所が減ったり、細かい装飾が見にくくなったため、webサイトの色数が減ってきたそうです。

今まで基本だった配色は、

ベースカラー70%、サブカラー25%、アクセントカラー5%などと色の面積の割合を決めて、それに5~10色を割り振っていくというものでした。

f:id:web_bu:20160506214933p:plain

しかし、現在webサイトはさまざまな大きさの端末から見られているので、webサイトの色の割合は端末によって変わってしまいます。

そこで登場した配色の考え方が、ロゴ色+写真+トーン展開です。ロゴ色などのようなメインカラーを1色選び、サイトのメイン画像となる写真を置いた後、ロゴ色や写真の色に近いトーンの色の中から1,2色選んで使うというものです。

f:id:web_bu:20160506214922p:plain

同じようなトーンの色を使用するため、この配色をすると落ち着いてシンプルなwebサイトになります。また、色数が少ないと思ったら増やすくらいでちょうど良くなるそうです。

また、色数が減ったので1色1色のイメージをよく考えて選ぶことが大切になったそうです。色には、日常生活に応じて分類した基本色彩語というものがあり、日本では、

赤・青・黄・緑・紫・白・灰・黒・オレンジ・ピンク・茶

の11色に分けられています。少し例を挙げると、

  • 灰:スタイリッシュ ←→ 陰気
  • 紫:  高級感   ←→ 不吉
  • 緑:  安らぎ   ←→ 未熟

のようになります。色には良い意味と悪い意味をどちらも持っており、場面によって使い分ける必要があります。

私はこの話を聞いて、りんごだから赤、などと単なる実物の色を選ぶのではなく、できるだけwebサイトの訪問者にプラスのイメージをに与えられるような意味を持つ色を考えて選べたらよいと思いました。

トップページよりOGP画像

まず、OGP画像とは、WebサイトがFacebookなどのSNSでシェアされた時にタイムラインに表示される画像です。

f:id:web_bu:20160507001730p:plain

このように、webサイトの雰囲気を訪問する前に画像で伝えることができます。

これに対し、トップページは、検索エンジンで検索をかけても、タイトルやデスクリプションといった文字だけが表示されるので、リンクをクリックしないと見ることができません。

なので、トップページのデザインは主に「webサイトの訪問者を追い返さない」役割を担っています。逆に言えば、トップページのデザインは客寄せをすることができないのです。

だから、どんなに良いwebサイトも訪問されることがなければ無意味になってしまうので、客寄せができるOGP画像の方がトップページのデザインよりも大切なのではないか、というお話でした。

大会などでOGP画像を作る機会はおそらくないと思うので、私はこの話を聞いて、逆にデスクリプションの大切さを感じました。

テキストは黒く、大きく

最後に、テキストのスタイルについてです。

最近のテキストは全体的に色が黒くなってきているそうです。その理由として、スマートフォンの外での利用が挙げられます。強い外光の下では画面が見にくくなるため、テキストと背景の色のコントラストを高くしなければいけません。そのため、Googleニコニコ動画のように、スマートフォンサイトのみ文字を黒めに設定するwebサイトも出てきています。

また、テキストのサイズが大きくなってきているそうです。例としてAppleのwebサイトでは、

  • 大きめのテキスト 24px/27px #666(灰色寄り)
  • 小さめのテキスト 18px          #333(黒色寄り)

というスタイルになっています。大きめのテキストは、ディスプレイのサイズが一定以上大きければテキストも大きく、小さければ小さく表示されるようになっています。

これは上記の配色とは逆で、大きなディスプレイを持つPC向けの設定です。確かに小さな端末もとても普及していますが、液晶ディスプレイの技術も向上して低コストで作れるようになったため、大きなディスプレイのPCも販売はされています。

今のweb業界では、スマートフォン対応が当たり前で、プラスアルファで大きなPCにも対応できるようにするということが求められてる、ということだそうです。

この話で、私が気になったのはemという単位が全く話されなかった点です。Appleがテキストをpxで指定しているとのことで、他にも世の中のwebサイトが一体どのようにテキストの大きさを指定しているのかソースを見て回りたいと思いました。

感想まとめ

お題が「イロハ」ということもあって、少し聞いたことのある内容もありましたが、それらのさらに深い話が聞けて、より詳しく理解ができとても勉強になりました。

また、お話しされた坂本さんが、いろいろなwebサイトのテキストのスタイルを細かく収集されていることが印象的でした。既存のwebサイトにはたくさんの参考になる点があると思うので、気になったwebサイトをじっくり分析して収集してみたいと思いました。