トップページをデザインする。「メイン画像」が鍵!

こんにちは。武誰です。それでは、ホームページの看板である「トップページ」をデザインします。まず、閲覧者の環境を考えてつくります。

・・・断言します。全ての人に、理想のページを見せることはできません。

パソコンのバージョンも違えば、モニタの大きさも違います。自分のパソコンで見やすいページも、他人のノートでは見づらかったりします。

なので、様々な条件を考慮にいれ、最大公約数のホームページをつくります。幅960px。メイン画像が縦550px以内。高さに上限はありませんが、とりあえず1,500pxくらいで。

だいたいこんなサイズでホームページをつくります。取り合えず今回はPCサイズ。スマホは後ほど。

あまり画面ぴっちりにつくるとみづらいので、余白をつくってデザインをすすめます。まず前回ほどつくった大枠にデザインをはめ込むとこんな感じになります。

トップページのデザイン

では上から順にデザインポイントを説明していきましょう。

ヘッダー(グローバルナビ含む)

ヘッダーデザイン

基本、ヘッダーにはロゴ、リード文を入れます。バランスをとって、テキストリンクや問い合わせボタンを掲載しますが、今回はSNSボタンを設置しました。

ここで注意したいのが、ホームページは垂直のレイアウトしかできませんし、漫画のような斜め線や曲線、ブチ抜きはできません。たまに見かけますが、そう「見せている」だけで、本当はCSS(プログラムのようなもの)で無理やりしているだけです。

当然、複雑な記述が必要なので、ある程度知識を得てから検討してください。

さて、ここでデザインポイント。

たまにグローバルナビに「グラデーション」を入れたホームページをよく見かけますが、なんか「素人っぽい」とか「ダサい」と思うのたまに見かけませんか?

グラデーションを使うと、何かかっこいいような気がしますが、初期設定だと比率がいまいちで、逆に素人っぽさがにじみ出ます。

web2.0

このデザインはWeb2.0と呼ばれて、4・5年前にはやったのですが、今はタブレットを意識したベタ塗りのデザインの「フラットデザイン」が主流になりました。

なので今回はその流れに沿って、原色ベタ、もしくは白でシンプル、かつキレイなデザインにします。

さらにこの段階で、フォントを「メイリオ」にします。最近のホームページはメイリオフォントが主流です。MSゴシックに比べて丸みがあって表示もきれいなので、見た目がぐっとよくなります。

メイリオフォント

次はコンテンツ部分です。

同人サイトでよく見かけるのは、扉絵がどーんとのってるタイプか、背景にイラストのせて、透過するタイプ。インパクトがあってお洒落かもしれませんが、かなりセンスのいるデザイン。初心者が手を出すと、痛い目をみますので、今回は誰でもかっこよく見せる汎用デザインにします。

トップページは先ほどいいました通りindex。目次です。

・メイン画像
・新着情報
・サイト内コンテンツ
・SNS


メイン画像はホームページの看板です。あまり大きく見すぎると、ノートパソコンの画面では下の部分が切れてしまいスクロールしないと見れなくなります。

ホームページには「3秒ルール」なるものが存在し、閲覧者は最初の訪問で、3秒で以内で目的の情報が見つからないと離脱すると考えられています。

ですので、先ほど申しましたように、一番小さいであろうノートパソコンのサイズの縦550px以内にヘッダーとメイン画像が納まるようにデザインします。

ファーストビュー

自慢のイラストだけ載せるのもいいですが、せっかくのナイス広告位置なので、イベント情報なんかを掲載しましょう。

メイン画像がきまったら、他のページに移動するリンクを設置します。より見てほしいページを「バナー」にすると、閲覧者の導線ができるだけでなくホームページの見栄えもよくなります。

コンテンツ

ここでちょいネタ。前の章で、新着情報は高度なプログラムが必要といいましたが、「facebook」や「ツイッター」のプラグインを新着一覧に使う企業も多いです。

facebookは個人アカウントでは、この機能は使えませんが、「facebookページ」を作ることでホームページにタイムラインを埋め込むことができます。頻繁に新着情報を更新する場合、こちらの導入を検討ください。

最後にフッターです。

コピーライトだけ乗せる人がいますが、ページの最後となる部分なので、しっかりつくりこみます。

フッターデザイン

さて、これでトップページのイメージが完成しました。次は「下層ページ」を作りこんでいきます。

次のお話