Blog / KANO空感設計 あすまい空感日記・・・明日の私(MY)の住まい

ホームページ制作裏話 その7

昨日に続き、私達のホームページ(以下HPと表現)の制作について書きます。
今日は文章デザインについてです。
ラインとスクエア(四角)を多用し、モダンな印象を与えるように考えています。
各ページのコンテンツタイトル名の下などに共通して現れる、グレーの細い横ラインは繊細なデザイン性を感じさせるために使っています。
10のメリット、10のコンセプトなどの重要な数字にはスクエア(正方形)の濃グレーをかぶせ、強調しました。
その隣のテーマ文字にも帯状の薄グレーをかぶせました。
それによって、長い縦スクロールを番号ごとに、適度に分節化させました。

見出し文やその下の説明文の文頭には、濃いブルーのスクエアの箇条書きマークを付け、見やすくしました。インデント(文字下げ)も行って見やすくしています。
文章デザインをスクエア■で統一しているのです。

HPのタイトルを入れるヘッダー(ページの一番上の部分)には、事務所名ロゴを左端に入れ、右には、「空」の画像をバックに、キャッチコピーを入れました。
キャッチコピーの「空と自然を感じる開放感」をビジュアルでも表現したいと思ったからです。
また、本文の白いベースとはっきり分ける目的もあります。
左端の細かい文字の羅列は、かなり小さくて、薄いグレーなので読みにくいと思われるかもしれませんが、これはSEO対策(検索エンジン対策)のために入れた文字です。
なので、読む必要はあまりなく、目立たないように薄い色にしました。
各ページの内容に合わせて少しずつ変えてあり、検索予想キーワードをたくさん詰め込んであります。
このように自分なりにSEO対策も考えたHPにしています。
ページ右端列のナビゲーションのベースは薄いグレーとし、本文のベースの白とはっきり分けています。
コンテンツ名は、クールさを英単語(例えば Merit)で、親しみやすさ、わかりやすさを、その横に日本語訳(例えば メリット)を補助的に入れて表現しました。
ここの日本語フォントは、明朝体とし、本文のゴシック体に対し、目立たせる目的もあります。
ほとんどのフォントをゴシック体にしています。
小さな字の明朝体はHPの文章を長時間読むのには適していないからです。
英単語だけだと、かっこいいのですが、反面、全ての人が英単語の訳を理解しているわけではないし、クリックしないとどんなページに行くか分からないので、クリックをためらってしまうとこともあるのではと思いました。
長々とHP制作というテーマでブログを書いてきましたが、いよいよ次回が最終回です。