Web関連

Web制作会社厳選!レスポンシブWebデザイン(RWD)の便利なテンプレート&ツールまとめ

0

今回の記事は書く前から決まったテーマで書かなくてはいけませんでした。
ティファナコラム編集部から、通達があったのです。

きっと全社員が自由気ままにふざけたテーマを書きすぎていたのでしょう。

そんなわけで、今回の私のテーマは「レスポンシブWebデザイン」です。

 

世のWeb担当者様が気になってソワソワしているであろう、レスポンシブWebデザインの制作者目線で便利なテンプレート&ツールをまとめます。

レスポンシブWebデザインテンプレートPSD

今回、まず私が探したのはレスポンシブWebデザインのテンプレートPSDです。
海外のサイトでもPSDの配布やHTML5でもテンプレートは配布されていますが、今の日本の主流のデザインレイアウトはなかなか配布されていないのです。

PSDデータをひとつひとつ確認して、厳選したテンプレートPSDを紹介します。

THEYALOW – A Responsive Web Design

THEYALOW で配布されているPSDテンプレートはPC、スマホのシンプルで汎用性の高いレイアウトのレスポンシブWebデザインテンプレートです。

responsiveigeta_150920_02.jpg

responsiveigeta_150920_03.jpg

PC、スマートフォンのレイアウトもオーソドックスなのでとても使いやすいです。

Sally Blocks

responsiveigeta_150920_04.jpg

Sally Blocksで配布されているPSDテンプレートは、width480、960、1440、1920のブロックパターン、各サイズのデザインパーツ、ナビゲーションなどの全体のデザインパーツの合計12枚のPSDデータが配布されています。

responsiveigeta_150920_05.jpg

各サイズのデザインパーツでは、ボタン・テーブル・アコーディオン・メニュー・ポップアップメッセージなど細かいデザインパーツが揃っているので、とても使いやすいです。

responsiveigeta_150920_06.jpg

その他のPSDテンプレートでは、グローバルナビゲーションやボタンやナビのhoverデザインなども作られているので、指定した色味にだけ変えたら立派なレスポンシブWebデザインサイトになります。

レスポンシブWebデザイン用便利ツール

レスポンシブWebデザインが普及し始めてから、たくさんの便利ツールが登場しています!

…でも、何を使うと便利なの?

気になったので色々試しに使ってみました。中でもブックマークしておきたいツールをまとめます。

RWDJP

responsiveigeta_150920_07.jpg

RWDJPは、日本国内の秀逸なレスポンシブWebデザインを集めたデザインまとめサイトです。
右カラムのカテゴリ、カラー、技術、サイトタイプから目当てのレスポンシブサイトを見つけることができます。

また、個人的に気になった点としては、右カラムにある「レスポンシブWebデザイン情報」です。
レスポンシブに関する記事をまとめた一覧になっており、最新情報はここでGETできます。
…クライアントとの話のネタにも繋がるはず。

cssmatic

responsiveigeta_150920_08.jpg

cssmaticは、レスポンシブWebデザインに特化したツールではありませんが、
CSS3で再現可能なグラデーション、ボーダー、ノイズ、シャドウをWeb上で再現してそのままCSSソースをコピペできるツールです。

responsiveigeta_150920_09.jpg

黄色いボックスに淡くシャドウを引いてみました。こちらを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?

responsiveigeta_150920_10.jpg

Am I Responsive?は、対象サイトのURLを打ち込むだけで、デスクトップPC、ノートPC、タブレット、スマートフォンのサイズでサイトを表示してくれるツールです。

今までデザイナーが「レスポンシブになると、こんな感じになります。」という再現は各デバイスのPSDモックにサイトのキャプチャを当て込んで見せていましたが、このツールがあれば一発でレスポンシブ対応した様子を見せてくれます。

responsiveigeta_150920_11.jpg

ティファナで2度目のリニューアルの際にレスポンシブ化させていただいた「銀座CUVOクリニック」さんのURLを打ち込んで見ました。

それぞれの画面の中にiframeでサイトを埋め込んでいるようなので、小さな画面内でも操作可能です。

ただでさえ時間に追われているデザイナーには、ちょっと助かるツールですね。

まとめ

いかがでしたでしょうか?

世の中には便利なものがたくさんありますね。
便利なものを開発してくれる人たちのヒラメキには、頭が下がるばかりです。

「便利」で思い出しましたが、最近「シリコンスチームなべ」を買いました。

responsiveigeta_150920_12.jpg

万年ダイエット中の私ですが、野菜豊富で低カロリーな「鍋」を電子レンジ調理で食べるべく、この便利グッズを買いました。
付属のレシピを見ると、鍋が平皿のようにもなるため電子レンジで焼き料理もできるようです。

絶対に運動したくない私、これで痩せるといいな。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

Webデザイン制作

レスポンシブWebデザイン制作

関連コラム

メリットづくしのレスポンシブ・ウェブデザインとは?

レスポンシブデザインのサイトをわずか3日で仕上げる驚異的な方法

メリットづくしのレスポンシブ・ウェブデザインとは?

新しいメルマガ、「レスポンシブEメールデザイン」

レスポンシブデザインのHTMLコーディングにある落とし穴(Media Query編)

0

鍵からスマートフォンで開閉できるスマートロック前のページ

WebサービスInstagram(インスタグラム)の恐るべき経済効果!次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. AIに求められているものは、実は意外な物だった
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    webで広がる! おしゃれな誰かの着こなしが分かるアプリ 「XZ(クローゼット)」をまとめてみた

    こんにちは、デザイナーの寛幸です。残暑が厳しい日が続いていますが、季節…

  2. Web関連

    毎日見たくなるオウンドメディアサイトとは?

    自社でメディアを持つことを指す言葉「オウンドメディア」、今では多くの企…

  3. Web関連

    デザイナーの私がおすすめする厳選サイト3選

    久しぶりに私のコラムの題材に規定がなく、「よっしゃあ~すごいの書いちゃ…

  4. Web関連

    大切なマイナンバーを守るために

    ついに開始されたマイナンバー制度ですが、使い方や管理方法には注意が必要…

  5. Web関連

    今、最も人気のあるプログラム言語は何か。

    「ゲッツ!」の人、覚えていますか?仕事に追われ、ちょっとストレスが溜…

  6. Web関連

    メリットづくしのレスポンシブ・ウェブデザインとは?

    こんにちは。デザイナーの栄です!今回は、『レスポンシブ・ウェブデザ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AI関連

    美味しく健康的な料理はAIの活用で
  2. Web関連

    健康診断を行う理由と未来
  3. Web関連

    仕事で使える!スマホ、iPodで印刷が出来るプリンターアプリ
  4. AIさくらさん

    【人工知能(AI)×リクルート】多言語対応の人工知能が就職希望者の不安を払拭
  5. Web関連

    Webサイトは公開後が大切
PAGE TOP