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. 新型コロナウイルスで日本の働き方改革が起こる
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    業務を効率化できるサービス

    こんにちは、システムエンジニアの小森です業務効率化について、3回にわた…

  2. Web関連

    ポケモンGo!田舎でやってみた!

    何かと話題のポケモンGoですが、正直私はポケモン世代でもなければ、興味…

  3. Web関連

    ついつい読みたくなるwebサイトのコラムを書くコツ ~作文 3つの基本編 ~

    こんにちは。ティファナコラム編集部です。前回は、「もっとWebサイ…

  4. Web関連

    海外ニーズが高まるネット通販

    皆さまは、「ネット通販」を使って買い物をされたことがありますでしょうか…

  5. Web関連

    新しい販売形態であるDtoCについて考えてみる

    目次- Direct to Consumer(ダイレクト・トゥ・カ…

  6. Web関連

    モバイルフレンドリーってなんだ?

    こんにちは!写真のことなら私、デザイナー出口です。先月ゴールデ…

おすすめ記事

最近の記事

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

アーカイブ

  1. AIさくらさん

    【人工知能(AI)×出版】本探しの手間解消!AIがお客様の本を選ぶアドバイザーに…
  2. Web関連

    One to Oneマーケティングへの道(2)~個をターゲットにした広告「DSP…
  3. サービス・新技術

    【3分で解説】これから始まる自動車教習所のオンライン学科教習。知っておくべき3つ…
  4. AI関連

    AIで始める健康管理~最新の研究・取り組みもご紹介します~
  5. AI関連

    図書館でのAIの居場所〜人工知能サービスによる図書館業務の革新
PAGE TOP