良現在のトレンドから推測する
これからのホームページ・トレンド。

今後のホームページで考えないといけない３つの事
現時点で今後、ホームページの制作で考えていかなければならない事は、スマートフォンへのサイト対応有無と範囲の判断、情報へ辿り着く道であるサイト導線、サイトコンテンツ内の情報の濃さ、この３点だと考えています。

ＨＰデザインやＨＰ活用法（SEO対策やPPC広告、SNS活用など）も１つの考えとしてはいいのですが、テクニックに走るのではなく、時代背景を鑑みながら何が求められているかを抑え、構築していく必要があるのです。

各トレンドと考え方についてご紹介いたします。

レスポンシブデザインとは、ＰＣやスマートフォン、タブレットなど各種端末において１つのファイルで各画面サイズに最適化して対応させるデザイン手法。

１つの共有コンテンツ情報のHPファイルを利用して、デザイン（CSS）は上記３パターンに合わせて制作し、それらをアクセスしてきた端末に合わせて自動で振り分け、閲覧できる様にします。
レスポンシブデザインで制作されたサイトは、デザインや機能の自由度は下がりますが、情報の修正は１つのHPファイルを変更する事で反映されます。

それに対し、ＰＣやスマートフォン、タブレット様にデザインした３つのＨＰ用ファイルを制作する方がデザインや機能の自由度は上がります。ただ、コンテンツ情報の修正時には３つ分の各ファイルを修正する必要があります。（作業の手間が増えます）

レスポンシブデザインのホームページは、１つのHPファイルを利用しているため、３つのHPファイルを別々で作るサイトよりも制作費が安価になりそうなイメージがあります。
ただ、デザイン（CSS）に関しては同様に３つ制作する必要があるため、制作工数はそこまで大幅に変わりません。要望されるデザインによっては逆に企画や設計に工数がかかり、高価になるケースもあります。
（デザインにこだわられないのであればいいのですが、こだわられるとデザインの自由度が低いため制作難易度が上がります。つまり作業工数が上がるので価格が上がるのです）

その他にも、下記のキーワードもおさえておきます。

◆リキッドレイアウト
リキッドレイアウトは、ブラウザの幅によってページの縦横幅が変化します。
縦横幅の変化する形の基本的な動きが、リキッドレイアウトといいます。

横幅が変われば、流し込みの文字数が変わって改行されます。
ブラウザの幅が変わっても横のスクロールバーが出なくて下に流れていく仕様です。

デメリットは、最近幅の長いディスプレイが多くなってきましたので、制限をかけないと、横に長々と文字がきてしまい見づらくなるという点でしょうか。
その点を改良した手法が下記のフレキシブルレイアウトという手法です。

◆フレキシブルレイアウト
フレキシブルレイアウト（フレキシブルデザイン）も、ブラウザの幅によってページの縦横幅が変化します。リキッドレイアウトでの設定からの派生で。
横長のディスプレイ等でサイトを閲覧しても、幅の上と下のサイズを指定することで見やすさをある程度、維持することができます。このような読むときのストレスを解消するレイアウトが、リキッドレイアウトではなく、フレキシブルレイアウトと呼ばれます。

これらの動きに、ブロックごとの配置にて見せ方を変化させる手法を下記のグリッドレイアウト（可変グリッド）といいます。

◆グリッドレイアウト（可変グリッドレイアウト）
グリッドレイアウトは、画面やページにて、縦と横に見えない直線で分断する様にブロックに分割し、そのブロックのサイズと配置などを組み合わせてホームページを構成していく手法です。
新聞や雑誌などの印刷物のレイアウトでよく使われている手法でもあります。

グリッドレイアウトのメリットですが、コンテンツ（ページ情報）が多くても、各ブロックごとにレイアウトされているので一覧としても見ることができます。また、縦横のブロックにてデザインされているため、統一感がでます。

逆にデメリットは、コンテンツの順位付けがしづらく、一覧として見る事はできてもコンテンツ数が多いと、どの情報を見ればいいのか迷いやすくなります。
サービスや商品の紹介や、事例関係では見やすいのですが、お勧め商品と通常の商品との差がブロックの縦横サイズの違いでしか表現できないイメージです。 　

これからは、発想にてこのグリッドレイアウトでの規則性を持たせつつ、部分的に「遊び」の部分をつくったり、新しい見せ方が生まれてくる様に思います。

フラットデザインとは、影や色についてもシンプルで、伝わりやすく、無駄な要素を削除した、スッキリとしたデザインのこと。
つまり、リッチデザインとは対義語になるわけです。

写真やボタン画像、文字やタイトルにおいて、影やグラデーションをつけない手法です。パッと見、そっけない様にも感じる方もいるのではないでしょうか。

フラットデザインは目新しいデザイン手法でもありますし、WindowsやMac、Googleなどでもこのデザイン手法を採用しているので、少しづつ認識されてきた感はあります。
テキストの量についても同様で、できるだけ少ない文字数で表現するものが多いです。また、横幅いっぱいまで文字を設定せずに余白をあけて表示することで見やすさも向上します。これらもフラットデザインといえます。

このフラットデザインを採用することによって、スマホやPCでのサイトの表示速度が速くなるのはありますので、閲覧時のユーザストレスを削減できます。
シンプルなデザインの世界観になりますのでWebデザイナーの腕が試されるデザインでもあります。ユーザーに何を伝えたいか、これをどのレベルまでシンプルに表現するかを軸に考えていくことになります。

今後のホームページのデザインについての予測ですが、大きく分けて３つです。
①スマートフォンを意識したサイト設計
②サイトの軽量化の実現
③Webフォントの活用
これらを考えながらホームページを制作していく必要があると考えています。

スマホを意識したサイトですが、横長のディスプレイ、増えましたよね。そしてスマホの普及。すごい普及率ですよね。一見、真逆の環境ですが、どちらにも対応するには、どちらに重点を置くかです。私はスマホの方に重きを置くほうが良いと考えています。

ただ、先述しておりますフラットデザイン等の考え方を使いながら、幅の広いディスプレイでも満足させ、なおかつスマホサイトでも見やすいデザインレイアウトがサイト訪問者には喜ばれると考えております。

また、スマホサイトへの対応を考えると、サイトの軽量化も必要です。
そのために避けて通れないのはフラットデザイン。このフラットデザインとテキストの表現方法の追求も今後更に必要になってくるでしょう。
写真データだけでなく、できる限り容量をそぎ落として、でも見映えが悪くない、そんな素材を利用する事も必要なのです。

あと、忘れてはいけないのはWebフォントの存在。
Google社も提供しだしましたが、日本語対応したWebフォントも充実してきそうですので、これらも活用も視点に入れる必要があります。
Webサイトの量を軽くして、デザイン性を高める手法の一つです。

このあたりが、今後のホームページのデザインについての予測です。ホームページ業界は流れが非常に早いです。５年前の手法や技術はもはや過去の遺物です。スマホの普及をここまで予見できましたか？動画の利用度をここまで予測できましたか？

２～３年に一度、リニューアルする／ページ改修する／コンテンツ調整する、などの見直しは必須だと考えています。
サイトのリニューアルをお考えの企業様、いかがでしょうか？サイトの活用、制作についてお考えあれば、ぜひお声をかけて下さいませ。