今回は昨年担当させていただいた、AppDriver海外版サイトのリニューアルについてまとめてみました！
まずはリニューアル前のデザインはこんな感じです。
海外サイトのようなカッコイイデザインで、レスポンシブデザインにしたいとの要望が！
レスポンシブデザインやってみたかったので、胸が高鳴ります。
どんな風にコーディングするか実験しながら、まずはヘッダー部分のデザイン案を出していきます。
全部で30案くらい出していき、やっとデザインが固まってきました！
最終的にグローバル展開を表す世界地図のデザインが採用されました。
さらにこのデザインから、フォントや、レイアウトを変えてパターンを出していきます。
メインのキャッチコピーを読みやすくするため、濃いブルーで文字を縁取ったものに決定！
ヘッダーが決まれば後はそのデザインに合わせてサイトのコンテンツを作っていきます。
また今回はレスポンシブデザインなので、PC表示用のヘッダーは高解像度にして
スマホで表示した時ようのヘッダーも制作しておきます。
他のコンテンツはリキッドデザインに近いようにコーディングしていくので
特に画像の追加書き出しは必要ありません＾＾
コーディングでは、レスポンシブデザイン以外にWEBフォントなども利用してみました！
今回使用したフォントはGoogleFontです
http://www.google.com/fonts#
使い方も簡単で
-----------------------------------------------------------------------------------
①URLに飛び、フォントを選ぶ
②Quick-useボタンを押す
③3. Add this code to your website:にあるソースをhtmlに追加
※Page Load時間に気をつけること！
④必要があればCSSでどこにフォントを反映させるか指定
-----------------------------------------------------------------------------------
以上で画像にしなくても文字をデザインすることができます。
一つWEBフォントを利用する際に気をつけなければいけないのがhttpsのサイトから上記のページを表示すると、Webフォントへのリンクがブロックされてしまうということです。
その場合はリンク先をhttpsに修正する必要があります。
詳しくは下記サイトに画像つきで紹介されています！
http://www.dfour.net/webfont/
そしてリニューアルしたサイトがこちら！
https://appdriver.asia/
レスポンシブ対応しているので、ウィンドウサイズを変えるとそのサイズに合わせてデザインが変わります！
是非、みてくださいね～！
