超初心者がプロ並みデザインのホームページを自作する(デザインの要素)
自分で稼ぐネットビジネスの準備は着々と進んでいる。ここまで、ネットビジネスの中心となるホームページを作ってきた。
レンタルサーバー、独自ドメイン、WordPress、テーマ、プラグインと順調記事の投稿準備と以外にもスムーズに進んでいる。
断っておくが、私は全くこうした経験を持っていたわけではありません。パソコンを使うことも、ローマ字が打てる程度で、noteを始めてから、ブラインドタッチを練習を始めるほど、インターネットやパソコンに関して「無知」な状態でした。
そうしたまったくの素人でありながら、ここまでスムーズに運んでいることに自分でも驚いています。
さて、今回は「プロ並みデザイン」について話を進めます。この記事では、具体的なことではなく、「プロ並みデザイン」の概念を話したいと思います。つまり、私が目指す「プロ並みホームページとは」という話です。
プロ並みデザインの目標を決める
私は、ホームページを作る前に次のことを決めました。
・素人っぽくならないようにする
・デザインは綺麗なサイトをまねる
・動きのあるホームページは考えない
・使う色は3色まで
・可能な限りシンプルにして、パーツを使いまわす
ホームページだけではないが、まずは目指すところを決めることにした。その理由は、個人で何かするときによくあるのが、「迷子になる」ことです。
もっと簡単に言えば、興味に走って、時間を無駄遣いすることや、結果が中途半端になってしまうことを避けるためです。目標を決めておけば、目標を達成するために、余計なことは考えないようにできること、そして、そこに集中できることにあります。
私自身、いろんなことに興味を持つタイプの人間です。面白そうって思えば、それを追求したくなる性格です。そうした結果、終わってみると、あれもこれもと欲張ったものができます。いい時もあれば、結果何を作ったのかもわからないものができることも多いです。
今回は自分で稼ぐためのネットビジネスを構築するという大きな目標があります。そのために必要なツールの連携も考えれば、目標を固定したほうが出来上がりが自然になると考えました。
ここに挙げた5つはそうしたことをホームページの自作でもちゃんと決めておこうと考えたということです。
基本は、「わかりやすさ」と「見やすさ」に徹する
ホームページというと、特にビジネスで使うホームページは、ごちゃごちゃしたイメージです。あれもこれも、言いたいことをすべて表現する。例えば、バナーで画面いっぱいにしたり、背景にもバナーを使ったりなどなどです。
まず、コンテンツが最も目立ち、余計なことを排除することで、パッと見て、どこに何があるかをはっきりさせることを徹底すれば、結果、「わかりやすく」「見やすい」ホームページになると考えました。
最近思っているのは、noteは理想的なデザインの一つだと思います。他にも方法はあるとは思います。が、シンプルにすればその分時間もすくなくて済みますし、以外と個性的なものができると考えています。
素人っぽくならないようにする
同じような内容になりますが、とかくツールを使ったモノづくりは使う道具の面白そうなものをてんこ盛りにしてしまう傾向にあります。あれも使いたい、こっちも使ってみたいとなります。
ホームページを作る時も何らかのツールを使います。特に、まったく知識がないままつくるわけですから、ツールに依存した作り方になるのは当然だと思っています。ですから、最初に、使わないツールを決めておくことで、素人っぽいごちゃごちゃ感を排除していこうと決めました。
つまり、使う道具は可能な限り絞りこむということです。
結果、シンプルなホームページができると考えています。
デザインは綺麗なサイトをまねる
まったくの素人です。そして何より、「デザイン」の知識などありません。そうした人が全くのゼロから綺麗なデザインを目指すのは、無謀というか、デザインに対し、あまりにも無神経といわざるを得ません。
では、ゼロでなくすためにどうするのか?
「お気に入りのホームページを探し、まねる」ことを徹底したいと思います。
ネットショップで買い物をすることはよくあります。Amazon、楽天、Yahooショッピング、あるいは、フリーマーケット、など多くのホームページがあります。さらに、個人で作っているところもあります。そうしたサイトのマネをしてみることから始めました。
また、綺麗なホームページをまとめたサイトもあります。こうしたサイトを見て、自分が気に入っているレイアウトをパクることにしました。
ページすべてをまねるのは違法になりかねません。ですから、部分的によく似たレイアウトや装飾だけをまねる。それをベースに自分の理想に近づける。
私の場合、一つはnoteのレイアウトはまねるべき綺麗なサイトの一つです。
動きのあるホームページは考えない
最近よく見かけるホームページは「動く」ものです。動きを与えることはとても魅力的で、プロらしく見えるポイントの一つです。
ですが、それには高度な知識が必要になるのはいうまでもありません。ですからそれを学ぶ時間をわざわざ取らなくてはいけません。いずれは、そうしたいとは思いますが、今は動きのあるホームページは考えない。
それを学ぶ時間は他へ投資する。ということです。
使う色は3色まで
使う色は3色まで。というのはデザインを仕事にする人は良く耳にすることではないでしょうか?
色は印象を強く与える方法の一つです。ですが、使い方を間違えると、汚くなる、見にくくなる原因の一つです。
個人的には、色のセンスなどありません。ですから、基本にしたがって3色までと決めました。
自分の業種・商品を現わす色、そして、その色の同系色、その色の補色の3色です。補色は強調色として、強調したい言葉に使ったり、ボタンに使うようにすれば、伝えたいことがはっきりしてきます。
可能な限りシンプルにして、パーツを使いまわす
WordPress5.0から導入されたページエディタ(ブロックエディタ)は、パーツを積み木のように重ねてページ全体を構成していきます。
ですから、パーツは使いまわしできるものを用意すれば、ページ構成の統一感も出ます。そして何より、作る時に楽ができます。
最近の車は、車種が違っても共通部品が多くなっているといわれます。また、OEMに関しては、メーカーが異なっても同じ部品が使われています。
つまり、部品が少なくなるということです。
ホームページも同じです。一つのパーツを何度も使えるようにデザインしておけば、繰り返し使えますから、作業効率も上がるし、デザインを考える時間も節約できます。
より早く完成させることができます。
デザインはコンテンツを考慮すべき
ホームページのデザインは、ホームページの枠(テーマ)やページ本文のレイアウトを先に考えるべきではありません。なぜなら、コンテンツによってさまざまに表現されるものです。
例えば、どの文字を強調するのか、文字によっては強調の仕方も変わってきます。
例えば、バーナーを作るにしても、キャッチコピーによって、サブキャッチや写真や図によって、デザインは変わってきます。
まずは、コンテンツを作る。そして、コンテンツに合わせて、デザインやレイアウトを決める。この手順がプロ並みデザインに近づけるコツです。
ページ毎にデザインは変わるでしょう。レイアウトも変わるでしょう。ですが、最初に決めた5つを守っていれば、印象を変えることはないと考えています。
まずはコンテンツが先で、コンテンツが重要です。
ホームページのデザインは個性が必要
ここまでの記事でも「個性が必要」だということは何度も出てきたことです。あなたが作るホームページです。金太郎あめのように「どこかで見た」「他のページ似ている」ではもったいない。
「個性」を出すことは決して悪いことではありません。それが、同業者と違っていると不安になるかもしれませんが、より目立つと考えれば悪いことではなく、良いことになるほうが多いです。
読者が求めているのは、「今までとは違うもの」ということが一つ言えます。今までとは違うというのは、個性的だということです。
無理にすれば、苦しくなります。しかし「自分らしく」と考えれば難しいことではないはずです。
いかがでしたか?少しプロ並みデザインのホームページのイメージは沸いてきましたか?まったくの素人であったとしても、プロ並みデザインのホームページが作れそうと感じましたか。もしそうならよかったです。
まだ、なんとなく不安な方もいるでしょう。ですが、一つ一つをじっくり考えてみてください。きっと、あなたにしかないものがイメージできるはずです。その助けになれば幸いです。
さて、次回は、「コンテンツとキーワード」についてお話をする予定です。楽しみにお待ちください。