1. TOP
  2. WEBサイト制作
  3. コンテンツを綺麗に見せるサイト作りのポイント

コンテンツを綺麗に見せるサイト作りのポイント

 2018/03/08 WEBサイト制作 WEBデザイン Fumio Sakurai
この記事は約 5 分で読めます。 534 Views

「主役はコンテンツ」〜 デザインは添え物 〜

今回のテーマは「コンテンツを綺麗に見せる」サイト作りのポイントです。

サイトは情報を伝えるためのものなので、主役は「情報=コンテンツ」です。

デザインは、そのコンテンツを伝わりやすくするためのものだというのが私の認識です。

ですから、装飾過多なものより、コンテンツを目立たせるシンプルなデザインが重要だと思っています。

シンプルなデザインのポイントは次の3つだと考えています。

  • フォント
  • 余白
  • 要素の整列

例えばこちらのサイトをご覧ください

「KIDORI」https://ki-do-ri.jp/

コンテンツがスッキリと見やすいデザインの例(KIDORI)

コンテンツがスッキリと見やすいデザインの例(KIDORI)

スッキリしていて見やすく、写真を前面に押し出すことによってしっかりとコンテンツが伝わるデザインではないでしょうか?

このサイトがスッキリして見えるのは、

①写真を目立たせるために、デザインの色を減らしている

センタリングを基調としながらも、要素ごとに左寄せ・右寄せを追加することで、読み手の視線を動かし、飽きがこないデザインにしている

高級感を出すために、余白を贅沢に使い、フォントも明朝体を中心に使っている

といったデザインのポリシーがあるからではないでしょうか。

レイアウトセンスを磨くためのリンク集

余白や要素の整列については、多くのサイトを見て、そのデザインポリシーを考え、自分でも作っていく中で身につきます。

私がいつもデザインの参考にしているリンク集の中でもよく使うものを2つ紹介させていただきます。

①Muuuuu.org(http://muuuuu.org/)

こちらは縦長のサイトを中心に集めており、業種や色合いごとにカテゴリー分けされているため、サイト制作の際の参考になります。

②Responsive Web Design JP (http://responsive-jp.com/)

対象を日本国内に絞って、秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

スマホサイズ・タブレットサイズ・PCサイズのキャプチャーが表示されているため、一覧性も高くレスポンシブデザインを学ぶ上で大変参考になります。

フォントを綺麗に表示するためのタイポグラフィ

実はフォントについては、今までWEBサイト制作において、多くのWEBデザイナーを悩ませてきました。

その原因が「タイポグラフィ」です。

タイポグラフィについてはこちらのサイトが参考になります。

タイポグラフィとは?基本ルールと作り方 37の要点

要するに、サイトを見やすくデザインの要素である、フォントの取り扱いについてです。

レイアウトは前章でも書いたように「センスを磨く」ことが重要なのですが、ことフォントの取り扱いについては、コーディングを行う際にも抑えておかなければならない考え方があります。

それは「MacとWindowsでは文字の見え方が大きく異なってしまう」ということです。

MacとWindowsでの文字の見え方の差

例えば以下の画像を見てください。

コンテンツ=情報を見やすく伝えるためには、タイポグラフィの意識が重要です。

コンテンツ=情報を見やすく伝えるためには、タイポグラフィの意識が重要です。

(参考:acに慣れたらWindowsのフォントが耐えられないので解決してみた|Mac)

 

比べて見てればわかると思うのですが、Macの表示に比べて、Windowsのフォントは非常にギザギザした感じがあるのではないでしょうか。

これがWindowsはMacよりも表示が汚いと言われて続けてきた所以となっています。

さらに、Apple製品は、Mac・iPhone・iPadいずれにおいても「Reinta」という高解像度表示を早くから実装しており、結果として、より文字の見栄えが変わってしまうこととなってきました。

ですから、ランディングページなどでインパクトあるデザインを押し出そうとする場合には、Windowsでも綺麗に表示するために「テキスト」ではなく「画像」で表示することが多いのです。

ただし「画像」の場合は、SEO効果が出ないため、テキストコーディングと併用することで効果を高めるなどの対応が必要となります。

MacとWindowsの表示の差を減らす

このタイポグラフィについての問題ですが、実はWindows8.1以降大幅に解消されました。

なんと「MacとWindowsに同じフォントが実装された」のです。

その名も「遊ゴシック体」!

この対応により、コーディングの際にフォント設定を適切に行うことでMacとWindowsのフォントの表示も近づけることが可能となりました。

ただ「適切に」と書かせてもらったのは、コーディングする際にポイントがあるからです。

それは「フォントの太さ」の取り扱いがMacとWindowsで異なるということです。

詳細はこちらの記事に詳しく纏められています。

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?

賛否両論あるとは思うのですが、要は設定を覚えてしまえばいいということです。

そして、コーディングする際には、以下のような形で設定しておけばいいと思います。

(参考:2017年版個人的ベスト|CSSフォント指定WIN、MACでキレイに表示(ゴシック、明朝)

まだ、游ゴシックをサイトに導入していない人は、是非この機会に試してみてはいかがでしょうか。

 

では、今日はこのあたりで。

Make the world better place.

 

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • 伝わりやすいサイト作りのための「戦略」

  • オウンドメディア構築にかける想い

  • 「ブランディング」のためのリファーラルマーケティング