Webデザインの効力をクリックしながら学習できるサイト「Web Design in 4 minutes」

S 2016 07 27 10 00 59

今や当たり前のものとなったWebサイトですが、魅力的なサイトを作成するためには、Webデザインに関しても気を使う必要があります。

このWebデザインの効力をわずか4分間で学習できるサイト「Web Design in 4 minutes」が話題を集めています。

同サイトは一見何のかざりもない、実用一点張りのWebサイトのように見えますが、画面の下に表示されているリンクをクリックすることで画面が切り替わっていく仕組みが埋め込まれています。まず「first thing」をクリックすると…。

コンテンツが大事

S 2016 07 27 10 01 14

デザインはコンテンツを助けるもので、コンテンツがもっとも大事なものだという至極もっともな主張が記述されています。

センタリングも大事

S 2016 07 27 10 01 24

次の主張はセンタリングが大切というものです。長すぎるラインは読みづらいので、一行の長さをbodyにmax-widthを設定することで制限し、センタリング表示することで読みやすさが向上するのです。

このときWebブラウザ内のサイトの表示が、実際にセンタリングされたことにも注目です。Webデザインにおける大切なポイントを説明するごとに、ブラウザ内のサイトの見た目が改善されていくのが興味深いポイントです。

スペース、カラー、バランス

S 2016 07 27 10 01 43

要素の適切な配置のためのスペーシングも大切。

S 2016 07 27 10 01 55

色やコントラストの設定も重要なポイント。完全な白地に黒文字は目に厳しい色使いとされています。もう少しソフトな色合いに設定する方法が説明されています。

S 2016 07 27 10 02 03

微妙なバランス調節の大切さなどが説明されています。ここではpreやcodeといった要素にpaddingや背景色が設定されているようです。

プライマリーカラー、セカンダリカラー、カスタムフォント

S 2016 07 27 10 02 12

視覚的なアクセントとなるプライマリーカラーを設定します。

S 2016 07 27 10 02 21

補助的な意味を持つセカンダリーカラーも設定。

S 2016 07 27 10 02 29

他と違った意味を持たせるためにカスタムフォントを使用することもできます。

画像を追加して完成

S 2016 07 27 10 02 36

背景画像などを追加して仕上げを行えば完成。

S 2016 07 27 10 02 59

Webサイトのトップに戻ってみると、最初はあれほど味気なかった「Web Design in 4 minutes」のサイトが、今風のクールなデザインに更新されていることがわかります。

以下ポイントをまとめてみます

  • コンテンツ
  • センタリング
  • スペース
  • カラーとコントラスト
  • バランス
  • プライマリーカラー
  • セカンダリーカラー
  • カスタムフォント
  • 画像やアイコン

これらのルールを覚えておけば優れたWebデザインを実装できそうです。

まとめ

「Web Design in 4 minutes」を作成したのは、フロントエンドデザイナーのJeremy Thomas氏。説明されている内容とともに、クリックするごとにWebサイトの見た目が切り替わっていくアイデアがHacker Newsでも絶賛されています。

デザインに悩んでいるWeb開発者・デザイナーの方は参考にしてみてはいかがでしょうか。

スポンサーリンク