自己流御免!オシャレなWebサイトやブログを短時間で制作する手順

自己流御免!オシャレなWebサイトやブログを短時間で制作する手順

Date | 2019年4月13日  Category | ホームページ制作 - Tag | ,

「出来るだけ簡単に高品質でオシャレなWebサイトやブログを短時間で納品したい」

そんな事を考えていて、数年前からWebサイトの受注をする際にデザインをすっ飛ばして制作、納品をしています。 多くのクライアントを抱えていることもあり、あまり時間が取れないのが正直な理由です。 3分に1通はクライアントからメールが来るような環境で働いています。

そんな状況でどうやって僕がWebサイトを制作しているか? 自己流ですが、参考になればと大まかなその流れを今回ご説明します。

デザイン工程をすっ飛ばす!

主語が大きくなってしまいましたが、フレームワーク(枠組みが出来ているHTML)を使用し、Photoshopでデザインをせず、直接コーディングを行い、時間を大幅に短縮します。

明らかにデザインから制作したほうが、用途に合った最適なWebサイトが出来るのは確かです。 しかし、オリジナルのデザインから制作してしまうとフレームワークがマッチしない場合が多く、HTMLが独自の枠組みになってしまいコーディングに時間がかかってしまうケースが多いです。

レスポンシブのサイトになるとPCレイアウトとスマホレイアウトの整合性が取れない箇所が出てきてしまうこともあり、更新の際にも手間が発生したり、更新箇所がレイアウトごとに分かれていたりすると後々ミスに繋がります。

HTMLフレームワーク

既に枠組みが出来ている海外のサイトで購入したHTMLフレームワークを使用しています。 理由としてはクオリティが高く、使用したいブロックをコピペするだけである程度のデザインとレイアウトのHTMLが出来ます。 そこに写真や文章を入れていくという方法。 これだけの作業であれば2時間程度で10ページ程度のサイトの大まかなコーディングが出来ます。

サイトマップだけあれば、ワイヤーフレームも必要なしです。

僕がよく使用しているHTMLフレームワーク、RHYTHM(ベースはBootstrap)。 2000円程度で商用利用可能な高品質のHTMLが手に入ります。
このブログもRHYTHMを使用しています。
デザインはほぼそのままで使用する枠だけをコピペして組み立てています。

それでもデザインが必要な部分がある

サイトを構成するバナーや図はどうしても作らなければならないので、もちろんデザインをします。 ただし、ここも独自の見出し類やアイコンをaiとPSDとのデータでまとめているのでそこから文字を打ち変えて使用しています。

RHYTHMはグローバルナビとフッターがシンプルなのでその部分は作り変えることもあります。 しかし、コンテンツ部分はフォントの調整や装飾するだけで枠はそのまま使用します。
このブログはほぼそのままのデザインで使用したいパーツだけをコピペして組み立てています。

HTMLをCMSにマージする

コーディングをあっさり終えて、WordpressなどのCMSにHTMLを組み込んでいます。 このブログもWordpressも含めて3時間で構築しています。

なぜマージするかというと、内部構造が理解出来ていないWordpressのテーマを使用してしまうとアップデートで使えなくなったり、機能追加の際の融通が利かなくなってしまうケースがあるからです。出来るだけプラグインは少なくすることを心がけています。

自己流なのでもっといい方法があるかも

あくまでも僕のやり方なので一般的ではないと思います。 大手Web制作会社から転職してきた同僚に「こんな作り方する人初めて見た」と言われたのでこれからWebデザインを始める方はきちんとPSDから制作したほうが良いかと思います。

細かい部分に拘らない人にはオススメです。

Pocket



Gadgets for life