Web関連

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

0

最近の私の中での流行りは「故事成語」です。

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

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

 

いつも前置きが長くてすみません。本題はここからです。
時間がかかって大変だなぁと思ったので、短い時間で仕上げる驚異的な方法を考えてみました。チャー・シュー・メーンでゴルフのスイングをするように、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デザイン制作

0

W3C日本会員会議に参加してみた!前のページ

セーラームーンのリメイク版はなぜヒットしたのか?次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    マーケティングオートメーションの素敵なアプローチがHAPPY!をもたらす?

    制作会社にいると、こういった最新のツールなどにふれる機会があるのですが…

  2. Web関連

    Web制作会社が提案する顧客ロイヤリティ向上施策

    企業にとって、顧客は大切な存在です。売上を左右するのも、顧客です。だか…

  3. Web関連

    空腹注意! 飲食業界に関わって学んだこと!

    最近飲食業界のプロジェクトに関わりました。食べることの大好きな私にとっ…

  4. Web関連

    スマートフォンサイトにオススメ!使い勝手を良くするためのjquaryまとめ!

    Web制作をする上で、リッチなウェブサイトを作るには、面白い動きを取り…

  5. Web関連

    今注目のクロスチャネル・キャンペーン・マネジメント(CCM)とは?

    最近よく耳にする、クロスチャネル・キャンペーン・マネジメント(以下CC…

  6. Web関連

    webサイトで顧客満足を上げるポイントは意外なところにあった!?

    こんにちは。ティファナコラム編集部 担当の遠藤です。コラムのタ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    CMSとしてのWordPress導入 その2
  2. Web関連

    競合よりも顧客満足度を上げるには「顧客の期待値を変える」こと
  3. Web関連

    シームレス化が進む!1つのWordPressで複数のサイトを更新する方法とは?
  4. Web関連

    これだけ載せておけば大丈夫!リクルートサイト必須コンテンツ!
  5. Web関連

    ECサイトの売上を向上させたい 第2回目
PAGE TOP