読者です 読者をやめる 読者になる 読者になる

AppDriver海外版デザインについて

噂のポケモンカフェに行ったら6時間待ちで心が折れた、デザイナーの櫻井です。

今回は昨年担当させていただいた、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/

レスポンシブ対応しているので、ウィンドウサイズを変えるとそのサイズに合わせてデザインが変わります!
是非、みてくださいね~!