BLOG

ブログ

Step4:サイトのデザイン
ようやく作り始める?いや、まだです(笑)
サイトを作るにあたって、多分一番大事なのがどういうデザインにするかを決めること。
で、一番最初にやるべきことが他者のサイトを見ること。
ないがしろにされがちなんだけど、僕はこれがとても大事だと思ってる。
以前勤めていたインターネットの会社でも、今組んで仕事をしているデザイン会社でも、デキる担当者は良く他社サイトを研究してる。
プロがやってるのにDIYの僕たちが他社サイトを見ずにサイトを作るなんてどうかしてる(笑)
というより、やはりデザインやUI/UXには、常にその時々の旬がある訳で、それを知っててデザインするのと知らずに作るのでは、サイトを見てくれた人の受ける印象は大きく異なったものになるはず。
とはいえ、どこをどう参考にしたらいいか、最初は分からないと思うので、考え方の指針を3つ。
1つ目、UI/UXは競合を真似る。
これは、同業他社かその業界のスタンダード的な、比較的大きな会社(サービス)のサイトを見て、導線やボタンなどがどのように配置されているかを研究するってこと。
理由は簡単で、同じユーザー属性の人が自分のサイトを見に来てくれたとき、操作に迷いが生じにくいから。
2つ目、デザインは異業種を真似る。自分のサイトのターゲットと同じ属性の人が使いそうな異業種のサイトを見ると、デザインの共通点や全く新しい発想につながるようなヒントを見つけられる可能性が高い。
ユーザー分析をしっかりしておくと、こうしたサイトを見るときに非常に役に立つ。
最後のポイントは必ずPCとスマホの両方を確認すること。
今はどちらか片方のデバイスで見るという想定は全くなり立たない。
業態に寄ってはスマホのほうが断然見られているデバイスなんじゃないかって思うことも。
ターゲットユーザーがどちらのデバイスを使うか事前の分析をしておくことはもちろん、それぞれのデバイスに合わせたリンクの設置の仕方を考える必要がある。
全てを真似できないとしても、考え方を理解しておくことは非常に役に立つ。
最低でも同業種10、異業種10の20サイトを見ることをおすすめしたい。
そのサイトから何を真似るかリストも作ると便利。

真似するリストや良いなと思うデザインリストが出来上がったらワードプレスのテーマを選ぶ。
で、ワードプレスのデザインは、このテーマ選択が8割、9割といっても過言ではないかもしれない。
無料のテーマは山ほどあるし、有料のテーマも選びきれないくらいたくさんある。
今、僕が取っている方法は、汎用的に使えそうな有料テーマを3つ購入して、目的別にそれを使い分けるってやり方。
いくつもサイトを作ってきたけど、結局有料テーマが安い(特に仕事の場合は)。
デザイナーさんにデザインしてもらってもそれをコーディングする金額を考えたら、ある程度デザイナーさんに制約を伝えて、そこで実装できるものを作ったほうがやりやすかった。
もちろん、フルスクラッチでサイトを作ることはあるけど、殆どは有料テーマのカスタマイズで済んでしまうことが多いって印象。
有料テーマを使うと楽なのは、デザインスタイルがある程度固定されること。
それに合わせてテキストと画像を当てはめていくだけで結構ステキなサイトが出来上がるのは、やっぱり有料テーマの利点だと思うね。
あと、アイディアを表現する場合には適度な制約がある方が、僕たちデザイン素人にはやりやすいと思う。
所詮、Webサイトといっても画像とテキストしか使えないわけで、それをどう見せるかって話なので効率よく当てはめられる仕組みを安価にってなると有料テーマって選択肢はありだと思う。
無料が行けないってわけじゃないんだけど、無料は制約がなさすぎて結局デザインを自分で考えないといけないって状況になりやすいかな。
あとは、海外で作られているテーマより日本で作られているテーマのほうが、使いやすいので有料・無料に限らず、僕は日本で作られているテーマをおすすめしたい。
因みに無料テーマだったら断然Cocoonがおすすめ。
有料のテーマで僕が使っているのはTCDのFAMOUS>LuxeritasSTILE
よし。これでやっと作れるようになるよ。

この後のステップ
Step5:テキストと画像を準備
・テーマに合わせて考える。タイトルの文字数、テキストの文字数、画像サイズなど

関連記事一覧