![株式会社ケイツー・インタラクティブ [K2-interactive]](https://www.k2-interactive.co.jp/common/images/unit_img/logo.png){kind=logo}
私たちは、台東区浅草雷門でホームページ制作・運営代行とインバウンド対応/集客支援をしている会社です。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
フラットデザインとは、装飾要素をなるべくそぎ落とし、デザインの本質の部分を残し必要最低限の装飾で構成したものがフラットデザインです。
比較対象になるのが一昔前に流行ったリッチデザインで、アイコンやボタン、デザインのあしらいに装飾が施され、立体的に見えたり、質感が物質的に見えるデザインです。
フラットデザインは2012年頃から流行はじめて来たと言われています。windows8 や iOs7 のOSデザインに採用されたのが流行のきっかけとなり、WEBサイトはフラットデザインが主流なりました。シンプルで先進的スタイリッシュな印象を与えるこのデザインは、現在では多くのWEBサイトがフラットデザインを採用しています。
しばらくの間、WEBデザインのトレンドはフラットデザインになりそうです。
フラットデザインにも採用するメリットとデメリットがあります。採用の可否はWEBサイト運営開始後にも大きく影響します。
フラットデザインのメリットは大きく分けて3つあります。
フラットデザインはデザイン要素がミニマルなので、ユーザーがコンテンツの中身に集中することができます。その結果、より深く情報提供者の意図をユーザーが理解することが出来ます。
具体的には、文章や画像などの記事が読みやすいということです。過剰な装飾が無いので目線が文章や写真に集中しやすく、記事を読ませるのにとても適したデザインと言えます。
このことは、モバイルファーストの3つのポイントでも提唱されていて、現在の情報伝達のコミュニケーションのトレンドといっても良さそうです。
画像を多用した過度な装飾はデータ容量が重くなりネットワークの負荷につながります。インターネット上ならではのデザインの概念になりますが、とても重要な要素です。
Googleなどの検索エンジンの多くはページ表示速度を検索結果の評価対象にしています。ページが軽いことは上位表示のための重要な要素のひとつです。フラットデザインはネットワークの負荷を軽減して、ページ軽量化にも貢献します。
フラットデザインのメリットは変化に強いという所です。「変化に強いデザイン」とはマルチデバイス対応に強いということです。
ホームページはブラウザ、ディスプレイ、デバイス、それぞれで見え方に特徴があります。その多様な条件に比較的柔軟に対応出来るのがフラットデザインなのです。
具体的には、CSSをうまく使ってデザインしていくことで、見え方が変化しても、状況に応じて最適なデザインに変化するようにホームページを作ることが出来ます。詳しくは『ホームページのデザインを作るCSSとその効果』で解説していますので、こちらも合わせてご覧ください。
HTML5+CSS3対応のブラウザであれば、HTMLとCSSだけでもかなりのデザインを実現することが出来ます。場合によってはフラットデザインであれば『HTML5+CSS3』のみでデザインを完結してしまうことも出来ます。このことは、レスポンシブウェブデザイン(RWD)としてデザインする場合にも重要な要素になります。また、更新も容易でCMSとの相性もいいデザインといえます。
装飾を押さえている分メリハリが無くなり、UI(ユーザーインターフェイス)が使いにくくなるなど、ユーザービリティーへの配慮がおろそかになる傾向があります。
ビジュアル面ばかりデザインを気にかけてしまい、ホームページの本来の目的を達成しにくい作りになるリスクがあります。
フラットデザインは上記で述べたように、とても軽量でマルチデバイス対応できるデザインです。また、ユーザーが記事にフォーカスしやすく、情報伝達ととても相性がいいです。そのメリットをどういかすか？がポイントです。
まずは、きちんと情報伝達するために、ホームページの目的を明確にして、掲載する情報をグルーピングし優先順位をつけていきましょう。ホームページ制作前の設計に関しては『ホームページ運営成功のポイントはワイヤーフレーム』も合わせてご覧ください。
フラットデザインは、HTML5+CSS3 をベースに作成します。CSSで配色された大きな面を取り入れる演出は、各種デバイスにも柔軟に対応しつつも、ユーザーにインパクトを与えることが出来ます。
アイキャッチ（目を引くポイント）に関しては、シャドウやテクスチャのような質感を取り入れ、他の要素とテイストを切り離すことが有効です。これだけの演出をしても、HTML5+CSS3であれば、データ容量は画像とは比較にならないほど軽量です。
2019年9月の時点では、まだWEBデザインのトレンドといっていいでしょう。将来は他のデザイン、例えばリッチデザインのように『あ～、あの時代のデザインね。』といわれるようになるかもしれません。
しかしながら、ここでご紹介したフラットデザインのメリットを考えると、現時点では『フラットデザイン』そして『モバイルファースト』を考慮したWEBデザインを採用することをおすすめいたします。
フラットデザインはシンプルかつ大胆に、いかがでしたでしょうか？フラットデザインを採用するときのポイントは要素の重要度の順位とポイントを明確にして、該当箇所のテイストを少しずらすことです。また、基本デザインはシンプルを心がけつつもCSSをうまく使い大胆に配色することがポイントです。
ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。
※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
フロントエンジニアが使う主な技術はHTMLとCSS、そしてjavascriptです。会社によってはサーバーサイドのNODE.jsやPHP、そしてSQLなど深いレイヤー部分（よりサーバーに近い場面での仕事）も求められることがあります。フロントエンジニアは広範囲に及ぶ専門スキルが必要なため、人により得意分野が違います。
WEBサイトTOPの背景に大きな動画を埋め込むことで、ユーザーの目を引きサービスのアピールや雰囲気を伝えて不ランディングをするケースがあります。動画はより多くの情報を伝えるのに適していますが、全てがいいことばかりでもありません。このページではメリットデメリットを踏まえてどのように動画を扱えばいいか紹介します。
ホームページでは扱う写真のクオリティの差がそのままホームページのデザインの差になるケースが増えてきました。これは通信速度の向上が大きな要因としてあげられます。ホームページの目的は何か？ポイントを押さえて容量の大きい『キメの写真』と、容量の小さな『添える写真』、情報として『伝える写真』を使い分けて、相対的にクオリティーの高いホームページを作っていくことを目指しましょう。
商品やサービスの特徴を伝えるためのインパクトがあり、消費者の心を捉えるのに適した言葉の総称をキャッチコピーと言います。日本では80年代頃から注目され、それまで商品の説明に重点を置いていた広告媒体が、商品が作り出す空気（世間の反応）に注目するようになり、伝搬（今でいうクチコミ）するのに適した言葉を多く広告に採用するようになりました。
PHPは世界で最も使われているプログラム言語のひとつで、利用している人が多いためインターネット上に多くの情報がアーカイブされているのが特徴です。また習得が比較的容易な言語で、プログラム未経験者にも習得しやすい言語です。
WEB担当者が知っておきたい！制作技術の豆知識 [質問箱 (FAQ)]では、WEB担当者のみなさまの悩みに、一問一答形式でお答えしています！！
