今回の記事は書く前から決まったテーマで書かなくてはいけませんでした。
ティファナコラム編集部から、通達があったのです。
きっと全社員が自由気ままにふざけたテーマを書きすぎていたのでしょう。
そんなわけで、今回の私のテーマは「レスポンシブWebデザイン」です。
世のWeb担当者様が気になってソワソワしているであろう、レスポンシブWebデザインの制作者目線で便利なテンプレート＆ツールをまとめます。
レスポンシブWebデザインテンプレートPSD
今回、まず私が探したのはレスポンシブWebデザインのテンプレートPSDです。
海外のサイトでもPSDの配布やHTML5でもテンプレートは配布されていますが、今の日本の主流のデザインレイアウトはなかなか配布されていないのです。
PSDデータをひとつひとつ確認して、厳選したテンプレートPSDを紹介します。
THEYALOW – A Responsive Web Design
THEYALOW で配布されているPSDテンプレートはPC、スマホのシンプルで汎用性の高いレイアウトのレスポンシブWebデザインテンプレートです。
PC、スマートフォンのレイアウトもオーソドックスなのでとても使いやすいです。
Sally Blocks
Sally Blocksで配布されているPSDテンプレートは、width480、960、1440、1920のブロックパターン、各サイズのデザインパーツ、ナビゲーションなどの全体のデザインパーツの合計12枚のPSDデータが配布されています。
各サイズのデザインパーツでは、ボタン・テーブル・アコーディオン・メニュー・ポップアップメッセージなど細かいデザインパーツが揃っているので、とても使いやすいです。
その他のPSDテンプレートでは、グローバルナビゲーションやボタンやナビのhoverデザインなども作られているので、指定した色味にだけ変えたら立派なレスポンシブWebデザインサイトになります。
レスポンシブWebデザイン用便利ツール
レスポンシブWebデザインが普及し始めてから、たくさんの便利ツールが登場しています！
…でも、何を使うと便利なの？
気になったので色々試しに使ってみました。中でもブックマークしておきたいツールをまとめます。
RWDJP
RWDJPは、日本国内の秀逸なレスポンシブWebデザインを集めたデザインまとめサイトです。
右カラムのカテゴリ、カラー、技術、サイトタイプから目当てのレスポンシブサイトを見つけることができます。
また、個人的に気になった点としては、右カラムにある「レスポンシブWebデザイン情報」です。
レスポンシブに関する記事をまとめた一覧になっており、最新情報はここでGETできます。
…クライアントとの話のネタにも繋がるはず。
cssmatic
cssmaticは、レスポンシブWebデザインに特化したツールではありませんが、
CSS3で再現可能なグラデーション、ボーダー、ノイズ、シャドウをWeb上で再現してそのままCSSソースをコピペできるツールです。
黄色いボックスに淡くシャドウを引いてみました。こちらをCSSで再現すると
.class {
-webkit-box-shadow: 2px 2px 120px -20px rgba(0,0,0,0.77);
-moz-box-shadow: 2px 2px 120px -20px rgba(0,0,0,0.77);
box-shadow: 2px 2px 120px -20px rgba(0,0,0,0.77);
}
このようになるようです。地道に微調整するより、とても賢い作り方ですね。
Am I Responsive?
Am I Responsive?は、対象サイトのURLを打ち込むだけで、デスクトップPC、ノートPC、タブレット、スマートフォンのサイズでサイトを表示してくれるツールです。
今までデザイナーが「レスポンシブになると、こんな感じになります。」という再現は各デバイスのPSDモックにサイトのキャプチャを当て込んで見せていましたが、このツールがあれば一発でレスポンシブ対応した様子を見せてくれます。
ティファナで2度目のリニューアルの際にレスポンシブ化させていただいた「銀座CUVOクリニック」さんのURLを打ち込んで見ました。
それぞれの画面の中にiframeでサイトを埋め込んでいるようなので、小さな画面内でも操作可能です。
ただでさえ時間に追われているデザイナーには、ちょっと助かるツールですね。
まとめ
いかがでしたでしょうか？
世の中には便利なものがたくさんありますね。
便利なものを開発してくれる人たちのヒラメキには、頭が下がるばかりです。
「便利」で思い出しましたが、最近「シリコンスチームなべ」を買いました。
万年ダイエット中の私ですが、野菜豊富で低カロリーな「鍋」を電子レンジ調理で食べるべく、この便利グッズを買いました。
付属のレシピを見ると、鍋が平皿のようにもなるため電子レンジで焼き料理もできるようです。
絶対に運動したくない私、これで痩せるといいな。
ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください！
関連するサービス
関連コラム
レスポンシブデザインのサイトをわずか3日で仕上げる驚異的な方法
レスポンシブデザインのHTMLコーディングにある落とし穴（Media Query編）
