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

関連記事

  1. Web関連

    ウェアラブルで健康管理

    健康管理といえば、メディアの情報からセルフチェックをしたり病院で検査を…

  2. Web関連

    web制作 システム開発には欠かせないOSSとは何か

    ここのところ急に寒くなってきたため社内でも風邪を引く人が増…

  3. Web関連

    人の役に立ち、意味のある会社でなるためには

    ##目次- あなたは、オールドタイプの人間?それともニュータイプの…

  4. Web関連

    Amazonプライムラジオ登場!

    4月22日、Amazonプライム会員用サービスに、新しくサービスが追加…

  5. Web関連

    なにがいいの?なぜいいの?GoogleAnalyticsのメリットとは

    Webサイトを運用していたら、一度は聞いたことがある名前「Google…

  6. Web関連

    苦情対応のための社内の仕組みづくりとは

    ティファナはISO10002を取得している関係で、苦情対応に関しての仕…

おすすめ記事

最近の記事

  1. 持つべきなのか?運転免許証+マイナンバーカード
  2. RPAから始める業務効の自動化 働き方改革への選択肢の一つに…
  3. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  4. 約1年間のウィズコロナ生活で大きく変わったもの
  5. スマートストアにより、小売業は激変する

アーカイブ

  1. Web関連

    Web制作会社の採用担当がおすすめするリクルートサイト必須コンテンツ3選!
  2. Web関連

    レスポンシブとは少し違う、アダプティブWebデザイン
  3. Web関連

    段取りで大変な大掃除も負担軽減できる
  4. AIさくらさん

    【人工知能(AI)×インバウンド】超えられない言葉の壁をAIさくらさんが解決
  5. AI関連

    【人工知能(AI)×コールセンター】人工知能で顧客満足度向上と業務効率化を同時に…
PAGE TOP