みなさまこんにちは。
高橋聡です。
ゴールデンウイークが10連休もあったので、久しぶりにデザイン～コーディングまでひとりでやってみました。
Googleライクなランディングページを制作してみる
ひたすらGoogleライクなランディングページを心がけて作ってみました。
ランディングページ制作にあたって気を付けたポイントは３点です。
・Bootstrapを使ったレスポンシブデザイン（モバイルファースト）
・画像少なめ
・テキスト多め
サイトデザイン
デザインはミニマルデザインに仕立てました（というより、ミニマルデザインしかできない。）
手の込んだデザインが作れないので必然的にミニマルデザインに落ち着いた。という感じです。
手の込んだデザインをご用命頂いたときは弊社デザイナーさんが素敵に仕立ててくれてます。
私は白と黒を基調としたモード系というか、ゴシック調というか、のデザインが好きで、カラーをふんだんに使うデザインが苦手なのです。
もちろん、photoshopで作成。
DWを使ってコーディング
今回コーディングするためのエディタはDWを使用しました。
昨年まで7年以上前に発売された中古マシンを使っていたので、ドリームウィーバーは重くて使いにくい。という先入観がありました。
そのため、Creative Crowdの契約をしているにもかかわらず今までダウンロードさえしてなかったのですが、2018年12月にマシンを買い替えたので今回試しに使ってみることにしました。
もちろん、大好きなSublime textと併用です。
Sublime text最高。
ドリームウィーバー、使ってみると結構便利。
特にDWにデフォルトで入っているBootstrapのテンプレは大変助かりました。
一からソースを書かなくてもコピペや配置を変えるだけで、そこそこのサイトが作れます。
他人が書いたソースを毎日にらめっこして改善しているWebディレクターなら簡単に使いこなせる（はず）。
ただし、HTMLとCSSの初歩的な知識、レスポンシブデザインの前提知識は絶対必要。
コーディングにかかった時間は10-12時間かと思います。
何度もランディングページを確認して、画像、テキストを追加
コーディング後は何度もランディングページを確認して、画像、テキストを修正・追加しました。
会社のメンバーに見てもらって、客観的視点でどこの文章が分かりにくいか？洗い出しました。
20回以上は修正・追加・確認を繰り返したと思います。
Googleモバイルユーザビリティテストはマストで実施
ランディングページが作れたので、Googleモバイルユーザビリティテストを実施。
Google検索上位を目指すのであれば、Googleモバイルユーザビリティテストはマストです。
今までWebディレクターとして行うべきSEO対策は、タイトルとディスクリプションの改善がでメインでしたが、これからはモバイルユーザビリティチェックをリリース前、運用中に行うべきかと思います。
モバイルフレンドリーテストとは？
モバイルデバイスでのページの使いやすさをテストします。
ページの URL を入力するだけで、使いやすさのスコアが表示されます。モバイルに対応する理由
モバイル デバイスからのウェブへのアクセス数は増加しています。ウェブサイトをモバイル フレンドリーにすると、あらゆるデバイスでのパフォーマンスが高まります。
モバイルフレンドリーテストを実施。
モバイルフレンドリーテストはこちら
結果は以下の通り。
Googleライクなランディングページは読み込みスピードが大事
Googleライクなサイトは読み込みスピードが大事です。
読み込みスピードが遅いと離脱率も格段に上がります。
スピード計測はこちら
PageSpeedを測定。
結果は以下の通り。
89まで行けば、いいかな。
90を超えるには地道なソース改善が必要になります。
１人でやっているので、体力的に今後の課題ということで・・・
Googleサーチコンソールでsitema.xmlを読み込ませる
ランディングページができあがったら、Googleサーチコンソールでsitema.xmlを読み込ませてください。
Googleにインデックスされないと、検索結果で表示されません。
まとめ
このあたりをしっかり行えば、Googleライクなサイトにできるかと思います。
参考になれば幸いです。
