最近の私の中での流行りは「故事成語」です。
>故事成語/故事成句(こじ せいご/こじ せいく)とは、故事をその語源とする一群の慣用語句の総称。(Wikipediaから引用)
故事成語は、中国の古典に書かれている逸話が元になっているようです。
例えば、「青は藍より出でて藍より青し」この言葉の意味は「弟子が師を超えることのたとえ」のことです。
ファンタジー映画などでは、よくあることですね。(笑)こんな言葉をいただく日が来れば良いのですが…(汗)
こういった言葉の起源にはなかなか面白いものもあるので、みなさんも是非調べてみてください!
いつも前置きが長くてすみません。本題はここからです。
時間がかかって大変だなぁと思ったので、短い時間で仕上げる驚異的な方法を考えてみました。チャー・シュー・メーンでゴルフのスイングをするように、3つのステップでレスポンシブデザインのサイト、作っちゃいます。
※この方法は、執筆者である糸井が独自に考えだしたものです。
HTMLを持ってくる→デザイン適用→検証 この3ステップだけ
先ず、HTMLを用意しましょう。Webサイトで「レスポンシブデザイン HTML」と検索すれば、既にレスポンシブデザイン対応され、完成している野生のHTMLがいます。(ドラゴンクエスト的な)こんな感じに。↓↓↓
そのHTMLを持ってきて、後はお好きなデザインを適用して、ブラウザで確認する。
完成!!!
あ、はい。すみません。悪ふざけしました。
ちゃんと説明します。。。
ステップは変わらないですが、方法が違います。
ちょっと度が過ぎましたが、HTMLを持ってくることは変わらないです。
どこから持ってくるかというと、CSSフレームワーク「Bootstrap」からです。このフレームワークの公式サイトに、サンプルのHTMLがあり、そのHTMLを活用することで、ベースHTML作成というとても大変な作業を短縮出来るのです。(ただ、HTMLは万能ではないため、どんなデザインでも適用出来るということではありません)
さて、驚異的な早さ(ダウンロードするだけですが)で第一ステップは完了です。
↑↑ちなみに、ここまでの時間たったの10分で出来てしまいます(笑)
次はデザインの適用、一番時間が掛かる工程
次に、用意したデザインをHTMLに適用していきます。ここが一番の難関で、時間が掛かります。(汗)
さて、先ず何をやろう。そうだ、デザインの適用でやることを出してみよう。ヘッダー・フッターなどの共通部分のコーディング、メインビジュアル部のコーディング、コンテンツボディ部のコンテンツ・・・出していたらきりがないですが、ここでは一旦、以下のように作業内容を分解してみます。
・共通部分(ヘッダー・フッター)
・メインビジュアル部
・コンテンツボディ部(2カラムまたは3カラムにする)
大分ザックリとしていますが(笑)、取り敢えずこんな感じで。
さて、早速コーディングを始めるか!と言いたいところですが、ここでも一工夫したいと思います。
「CSS3.0 MAKER」というものを利用して、用意したデザイン表現のほとんどを自動で作ってしまうのです!
これをすることで、一番時間が掛かってしまう工程すらも短縮してしまいましょう。
あとは検証、力作業!
さて、色々と工夫して、大分短縮出来たと思うので、あとは検証です。
が、ここはさすがに短縮出来ませんので、作ったページ一つひとつを目視で確認し、修正と再検証を繰り返してください。
さて、いかがでしたでしょうか?
結構な制限が多くありましたが(笑)、何とか3日でトップページを完成させられそうですよね。
そう。今真実を言いましたが、3日で作るって言ってたのは、トップページのみです。
さすがに、10~30ページ規 模のサイトを3日で完成させろ、というのは難しいです。(汗)
ですが、今回の記事で紹介したツールを利用すれば、普段の制作スピードより3倍は早く作れちゃうかも!?
是非是非、活用してみてください。
それでは、次回(があれば)をお楽しみに!