かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

GoogleのレスポンシブHP2017


新しい期が始まりました!昨年は人生のビッグイベントである結婚をし、その期間は制作お休みをさせていただいておりましたが、ありがたいことに再開してすぐお仕事を頂戴し新たな数サイトが産声をあげ世界へ向けて発信をしています。


HPが世界へ開かれた広告であるというのはもはや常識です。わたくしのようなフリーで作るものこそ常にアンテナを張り、フレッシュな動きにくらいついていきたいと思っています!ということで、2017年のレスポンシブの一例として、ここが基準といってもよいGoogle社のサイトよりポイントをいくつかピックアップします。

勉強させていただいたページは

「Google について | Google」 https://www.google.co.jp/intl/ja/about/ です。


SEO

  1. meta keywordsを使用していないことから、クローラーが超速全文検索が可能になったことがわかる。
  2. og:各種設定とtwitter:cardの設定から、SNSを重視していることがわかる。

1.非常に分かりやすい解説の meta keywordsの書き方とSEOで不要な理由|SEOラボ ブログ さんの記事をご紹介します。自社内制作であればともかくも制作を請け負う側としては設定しておきたいものです。また「画像」ではなく「テキスト」で表現することの重要度が増しているといえます。ユーザビリティを考えれば速度の足を引っ張るデータは極力使用しないというのがモバイルファーストの基本ですね!


2.FaceBookやtwitterの業績が落ちようとも、Google神がSNS大事だよ!と言い続ける限りは無視できません。最近の流行として、HP内にSNSプラグインでストリームを流すサイトは激減しましたね。しかし、SNSボタンの設置やhead内のmeta設定はしておきたいものです。


デザイン

キャプチャを貼って見栄えを比較します。

■PC

■SP

  1. header部分はPC・SPともに装飾に変化なし。
  2. 見出しにアイコンやサイド/アンダーバーなど装飾なし。
  3. テキストリンクは文字のみでボタン装飾なし。
  4. hrはシンプルな色の不透明度を下げた1pxライン。
  5. SPサイトでの情報の大胆なカット。

1.header部分のデザインで、好みが大きく分かれるのはheightでしょうか。わたしは、「ロゴ=看板」であり、またグローバルメニューとサブメニューを明確に区別しないと、ITロースキルの方がページ移動で迷子になる可能性が出るため、heightは70~80pxとることが多いです。

スマホアプリでしたら、利用者が主体的にインストールしているものなので、headerの重要度はHPほどではなくコンテンツゾーンを大きくとるためにheight50pxを下回るアプリも多いです。しかしHPの開設目的が営業広告であるならばインパクト重視です。

上記Googleページでは70pxを確保し、8pxもの影をつけて立体感を出しています。


2.非常にシンプルなフォントのテキストのみの見出しです。デバイスごとのバランスがとりやすいので、シンプルなサイトの場合は、見出しはセンタリングのテキストでいいと思います。


3.個人的に驚いたのがここです。確かにボタンはクリック率があがるけれども全体のデザインをそこねることもあります。また人材募集のリンクなので、目立たなくしてそれでもアクセスする人材という最初のふるいが行われていると考えるのは深読みでしょうか?


4.hr。cssで細部にこだわって作っていた時代もありましたが、ブラウザごとの癖で表現されないことも少なくありませんでした。デザインの邪魔にならないように透明度を加えた程度で済ませるのがオシャレです。


5.キャプチャではピンク色の部分がごそっと削られています。SPだと縦長になってしまうから。大胆に整理しましょう。