印象に残るホームページに共通する4つのポイントとは?
ホームページ制作に関わっているひとであれば誰でも、印象に残るホームページを作りたい、あるいは他のホームページより一つ上に抜き出たい、と思っているでしょう。
ブログメディアであれば、一人でも多くの読者を獲得したり、コマースサイトであれば少しでも売り上げを上げたいと思うのは、ごく自然なことです。
そうした場合に私たちに必要なのは「独創性」つまり「オリジナリティ」だと言われます。
確かに、創造力豊かでインスピレーションに溢れていれば、他とは違ったユニークなホームページになります。
しかし、「オリジナリティ」をどのように発揮すればいいのか、その方法は極めて抽象的で経験的だとも言えます。
「オリジナリティ」「イマジネーション」などの抽象的な言葉に惑わされずに、印象に残るホームページを作るにはどうすればいいのでしょうか。
そこで今回は、印象に残るホームページの4つの共通点をご紹介します。
印象に残るホームページの4つの共通点とは?
1. レイアウト
他のサイトと明確な差別化を図る上で最も分かりやすく効果的な方法のひとつは、レイアウトにこだわることです。
例えば、ブログサイトであれば左に本文エリア、右にサイドバーというスタイルが一般的ですが、そうした*「慣行」(例:ブログサイトとは一般的にこうレイアウトするものである)や「思い込み」*(例:ブログサイトとはこうしたレイアウトでなければならない)に縛られる必要はありません。
むしろ、そうした慣行や思い込みに縛られすぎてしまうと、場合によっては印象の薄いデザインになってしまいます。
Screenshot on http://rikiyanakamura.com
例えば、フォトグラファーの中村力也さんのポートフォリオサイトは、写真家の作品紹介ページの既成概念を大きく外しています。
横幅の違うカラムにさまざまな写真が滝のように流れていくのが印象的で、記憶に残りやすいレイアウトだということができます。
Screenshot on https://holliefernandophotography.com
同じく、ロンドン在住のフォトグラファーのホリー・フェルナンドさんのポートフォリオサイトは、同じ写真家でも、かなり大胆な写真の配置をしているホームページです。
このようなグリッドを無視して配置するレイアウトのことを*「ブロークングリッド」(Broken Grid)*と呼ぶことがあります。
はっきりとしたルールに基づいて並んではいないので、次にどこに配置がされるのかが予測不可能で、それがユーザーを飽きさせない工夫になっています。
2. ブランディング
レイアウトの他にも、さまざまな競合サイトの中で突出させるための強力な武器となるのが、ブランディングです。
ブランディングというと抽象的に聞こえるかもしれませんが、要するにブランディングガイドラインを作成して、一貫したレイアウトや情報発信にこだわっていくということです。
財布やカバンなど商品に依らずヴィトンのモノグラムを見ただけでルイ・ヴィトンブランドを感じることができるように、ロゴやタイポグラフィ、デザインの方向性が一貫していれば、ユーザーはブランドとしての魅力を感じることができます。
Screenshot on http://www.huffingtonpost.jp
HuffPostが2017年4月に行ったリブランディングは、うまくいった典型だといえます。
ロゴもセリフ体の細めのロゴからサンセリフ書体の太めのロゴに変更し、エメラルドグリーンのアクセントカラーを用いることで、ロゴを見たらすぐに「ハフポスト」だと分かるでしょう。
Screenshot on https://www.lightrail.com
一方で、似たような色合いやフォント、ボタンを使った色合いのデザインはブランディングとしては少し弱くなります。
例えば、ライトブルーやライトパープル・エメラルドグリーンなどを使った白地にカラフルな色調を使ったサイトは、デザイントレンドの流行に乗っかっているのでシンプルで見やすいですが、どれも似たようなデザインで印象に残りにくくなってしまいます。
Screenshot on https://todo.microsoft.com/ja-jp/
ブランディングを見直したいと考えているのであれば、ユーザーが本当にそのサイトのことを*「唯一無二」*であると感じるように設計しなければなりません。
もし、ブランドのスタイルガイドラインで、カラフルな色彩が使われていたり、HelveticaやAvenirなどの一般的によく使われるフォントばかりがフォントリストに並んでいたりするのであれば、インパクトに欠けるページになっている可能性があります。
3. グラフィック・イラスト
ブランディングで満足しないのであれば、「視覚に訴える」方法を考えてみましょう。
全画面的に表示する美しい写真やイラスト、あるいはその両方を使うことで、記憶や印象に残るホームページになるはずです。
Screenshot on http://minamishima.com.au
オーストラリアで展開している日本食ダイニングの「Minamishima」のホームページは、魚介のネタを黒背景のボードに並べた、印象的な写真を多く掲載しています。
料理長の南嶋コウイチさんの手ほどきも、写真で見るだけで文字通り「息を飲んで」しまいます。
Screenshot on http://ivanmesaros.com
一方、セルビアのイラストレーターであるイヴァン・ミザロスさんのホームページは、可愛らしいイラストが豊富で、イラストにはアニメーションもかかっているので、思わず見入ってしまいます。
イラストには、写真にはない柔らかい雰囲気があるので、ターゲットによってはイラストを使ってみてもいいでしょう。
Screenshot on https://www.and.co/task-manager
AND CO社がリリースしているフリーランス向けのタスクマネジメントツールMY DESKのホームページでは、写真とデジタルイラストを組み合わせたレイアウトになっています。
写真が持ち合わせる生き生きとしたイメージとイラストの柔らかいイメージが重なりあい、アイコンに使っている色合いもブランドを意識した色調となっています。
ただし、必ずしも写真やイラストを使えばいいというわけではありません。
ストックフォトなどを使うと却って没個性的となってしまうので、できる限りカスタムメイドの写真を使うようにしましょう。
4. マイクロコピー・コンテンツ
重要でありながら、多くの場合後回しにされがちなのが、マイクロコピーやコンテンツ自身です。
テキストコンテンツは画像やレイアウト以上にそのサイトの考え方を表しているので、他のサイトとの差別化できるポイントになります。
しかし、冗長に書いてしまったり、情報が整理されていなかったりすると、ユーザーに伝えたい意図が伝わりにくくなってしまいます。
Screenshot on https://www.wework.com/ja-JP/
例えば、間もなく東京にも進出する、世界27ヶ所で展開しているWeWorkのトップページにあるマイクロコピーは*「働き方の未来」*。
たったの6文字の中に、WeWorkを連想させるイメージが詰まっています。
Screenshot on https://framer.com/features/
ではマイクロコピーを置けばすべてが解決されるのかと言えば、そうとも限りません。
ここで重要な考え方は、その言葉は、自分のプロダクトやサービスを表す*「唯一無二」*の言葉になっているか、ということです。
たとえ短くスッキリした言葉であっても、ありきたりなのであればインパクトに欠けてしまうのを、肝に銘じておきましょう。
まとめ
インターネット上を回遊していると、おそらく目に止まるページというのはこれらのうちどれかを実践しているホームページのはずです。
高度情報化時代に生きるユーザーは、無意識のうちに情報の重要度を決めて、取捨選択しています。
そうした中で勝ち残っていくために、少しでも印象に残るホームページを作っていきましょう。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング