3日で仕上げる驚異的な方法│web制作会社のレスポンシブデザイン関連コラム

Columnコラム

レスポンシブWebデザイン(RWD)

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

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

2015/02/24
このエントリーをはてなブックマークに追加

こんにちは。コンサルティングの糸井です。
最近の私の中での流行りは「故事成語」です。

>故事成語/故事成句(こじ せいご/こじ せいく)とは、故事をその語源とする一群の慣用語句の総称。(Wikipediaから引用)

故事成語は、中国の古典に書かれている逸話が元になっているようです。
例えば、「青は藍より出でて藍より青し」この言葉の意味は「弟子が師を超えることのたとえ」のことです。
ファンタジー映画などでは、よくあることですね。(笑)こんな言葉をいただく日が来れば良いのですが...(汗)
こういった言葉の起源にはなかなか面白いものもあるので、みなさんも是非調べてみてください!

img_responsive_quick01.jpg

いつも前置きが長くてすみません。本題はここからです。
時間がかかって大変だなぁと思ったので、短い時間で仕上げる驚異的な方法を考えてみました。チャー・シュー・メーンでゴルフのスイングをするように、3つのステップでレスポンシブデザインのサイト、作っちゃいます。

※この方法は、執筆者である糸井が独自に考えだしたものです。

HTMLを持ってくる→デザイン適用→検証 この3ステップだけ

先ず、HTMLを用意しましょう。Webサイトで「レスポンシブデザイン HTML」と検索すれば、既にレスポンシブデザイン対応され、完成している野生のHTMLがいます。(ドラゴンクエスト的な)こんな感じに。↓↓↓

img_responsive_quick02.jpg


そのHTMLを持ってきて、後はお好きなデザインを適用して、ブラウザで確認する。

完成!!!

あ、はい。すみません。悪ふざけしました。

ちゃんと説明します。。。

ステップは変わらないですが、方法が違います。

ちょっと度が過ぎましたが、HTMLを持ってくることは変わらないです。
どこから持ってくるかというと、CSSフレームワーク「Bootstrap」からです。このフレームワークの公式サイトに、サンプルのHTMLがあり、そのHTMLを活用することで、ベースHTML作成というとても大変な作業を短縮出来るのです。(ただ、HTMLは万能ではないため、どんなデザインでも適用出来るということではありません)

さて、驚異的な早さ(ダウンロードするだけですが)で第一ステップは完了です。


↑↑ちなみに、ここまでの時間たったの10分で出来てしまいます(笑)

次はデザインの適用、一番時間が掛かる工程

次に、用意したデザインをHTMLに適用していきます。ここが一番の難関で、時間が掛かります。(汗)
さて、先ず何をやろう。そうだ、デザインの適用でやることを出してみよう。ヘッダー・フッターなどの共通部分のコーディング、メインビジュアル部のコーディング、コンテンツボディ部のコンテンツ・・・出していたらきりがないですが、ここでは一旦、以下のように作業内容を分解してみます。

・共通部分(ヘッダー・フッター)
・メインビジュアル部
・コンテンツボディ部(2カラムまたは3カラムにする)

大分ザックリとしていますが(笑)、取り敢えずこんな感じで。

さて、早速コーディングを始めるか!と言いたいところですが、ここでも一工夫したいと思います。
「CSS3.0 MAKER」というものを利用して、用意したデザイン表現のほとんどを自動で作ってしまうのです!
これをすることで、一番時間が掛かってしまう工程すらも短縮してしまいましょう。

あとは検証、力作業!

さて、色々と工夫して、大分短縮出来たと思うので、あとは検証です。
が、ここはさすがに短縮出来ませんので、作ったページ一つひとつを目視で確認し、修正と再検証を繰り返してください。

さて、いかがでしたでしょうか?

結構な制限が多くありましたが(笑)、何とか3日でトップページを完成させられそうですよね。

そう。今真実を言いましたが、3日で作るって言ってたのは、トップページのみです。
さすがに、10~30ページ規 模のサイトを3日で完成させろ、というのは難しいです。(汗)

ですが、今回の記事で紹介したツールを利用すれば、普段の制作スピードより3倍は早く作れちゃうかも!?
是非是非、活用してみてください。

それでは、次回(があれば)をお楽しみに!

関連するサービス

ホームページ制作

Webデザイン制作

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

関連キーワード
text_totop