Web初心者の絵描きによるイラスト用のホームページのつくり方 STEP2 デザイン決め

Yuko
絵描きとしてちゃんとしたお仕事用のホームページをつくりました!

 –>> 自力で作ったホームページはこちら

絵描き・イラストレーターだけど、Webサイトづくりは初心者だよ〜。
いざつくろうとしたら、どうすればいいか分からない!

ですよね。ちなみにわたしもWebサイトづくりは素人!初心者です。

実際に自力でつくってみたら、わりと時間がかかっちゃったので、同じ初心者へ自力でイラスト用ホームページをつくるまでをシェアしたいと思います。

✔︎自力でホームページを作るまでシリーズ

  1. STEP 0 迷う。 自分にホームページは必要?
  2. STEP 1 作る。 どのサービスを使うべき?費用はどれくらい?ざっくり知りたい
  3. STEP 2 作る。デザインをする。用意するものリストアップ ←今ここ!
  4. STEP 3 作る。ポートフォリオページにつくりこむ

 

初心者だと意気込んですぐに作業にとりかかりがち。

作業しながら、「あ、この色どうしよう。。こっちの画像どうしよう。。」

という感じで、その都度手が止まって考えて時間がかかってしまいました。

スムーズに作業が進めるために!作業前にまず用意した方がいいものをリストアップしておきます。

お役に立てばうれしいです^^

イラスト用ホームページづくりのデザイン!先に決めることリスト

Yuko
STEP0の記事でも書きましたが、自分のつくりたいホームページのイメージを固めるのが1番大事!

イメージがないまま作業を先にはじめてしまうと、あとで迷子になるのです。(…作業効率悪かったです!)

まずは、作業前に決めた方がいいことをリストアップしますね。

アップするメイン作品・カテゴリーを決める

仕事用にホームページをつくろうとしているなら、まずは作品から!

たくさんある作品の中で、まずわたしはメインカテゴリーを決めました。

 

それは、以前にアートディレクターの方に言われたことを参考にしたからです。

雑談しながらインスタグラムのアカウントを見てもらったとき、「作品を全部載せようとしなくてもいいんじゃない?しぼってもいいと思う。」とアドバイスをもらいました。

どんな絵を描くのか?得意なのか?が伝わりやすい方がいい

(しみじみ…)ですよね、ですよね〜。的確すぎるアドバイスでした。ホームページならなおさらです。

 

と、いうことで!まずは、どんな作品をメインに見せたいのかを考えて選んでおきましょう!

選ぶフォルターをかけるときに、自分の「得意」に加えて「やりたい仕事」「描き続けたいもの」という基準で作品をピックアップしながら、ポートフォリオでメインで見せたい作品を決めていきました。

Yuko
わたしの場合は、これからも自然や動物をモチーフに描いていきたいと思ったので、1番目立つトップ画面に自然や動物の絵を置きました

 

つくりたい全体イメージを具体的にする

え〜、またイメージの話か。。。と思うかもですが、

目指すイメージが具体的であればあるほど、この先の作業がスムーズになります!くどいですが、イメージ大事です!!

絵を描くときに参考資料を集めるように、Webサイトをデザインするために参考イメージを探しました

この2つの方法↓

  1. 好きな絵描き・イラストレーターさんのサイトを参考にする
  2. Pinterestで検索する

 

わたしの場合、海外のイラストレーターさんのホームページがかっこいい!好きー!というイメージ目標があるので、インスタでフォローしているイラストレーターさんのホームページをひたすら見まくりでした(笑)

シャープな感じ、かわいい感じ、モダンな感じ、すっきりクリーンな感じ。

これまで見ていたイラストサイトも、意識して見ると感想も違いません?

参考にできるのはデザインの雰囲気だけでなく、「メニューがこの配置だと見やすいな〜使いやすいな〜」とか、サイトの機能面も気になってくると思います。

そういう気になった部分はスクショしたりメモしていました。

いや〜、サイトを作るとなると今までとは違う視点でサイトを見るので、勉強になりましたね〜。

Yuko
もしまだイメージが漠然としている段階なら、Pinterestがオススメです! “web portfolio” で検索すると◎

 

カラーを決める

ここまで来れば具体的につくりたいイメージが手元にそろいましたね!

ホームページで見せていきたい自分の作品が決まり、ホームページの全体の雰囲気がみえてきたところで、自分のデザインをしていきましょう〜!

 

では次に、わたしは自分のホームページのメインカラーを決めました

  1. メインカラー
  2. サブカラー
  3. アクセントカラー

 

自分の好きな色でも、作品によく使う色でもいいので、サイトのキーとなるカラーを決めると先の作業がスムーズです!

Yuko
そして、決めたカラーコードはメモアプリにまとめておくと便利ですよ

 

ちなみに、サブとかアクセントカラーのオススメの組み合わせを自動で提案してくれるツールもありますよ♪

メインカラーを自分で決めたら、こういうツールで参考にするのもアリですね。

Color Huntでカラー提案してくれる

オススメ!カラーバリエーション自動提案ツール

  1. Color Hunt
  2. Color Hex

イラスト用ホームページづくりのデザイン!用意するものリスト

Yuko
必要なビジュアルパーツを手元に用意しておくと、スムーズに作業が進みます!

わたしの場合、WebサイトはWordPressという無料ツールを使って、Rifeという無料テーマ(=デザインテンプレート)を選んでいます。

選ぶテーマによって必要なパーツは違ってくると思いますが、基本的に必要になってくるパーツは共通しているはずなのでリストにしておきます〜。

基本のビジュアルパーツ

  1. サイトロゴ画像
  2. Favicon画像
  3. プロフィール画像

 

ちなみに 2. の「Favicon」というのは、ブラウザのブックマーク一覧とかで表示されるアイコンのことですね〜。

設定は必須ではないけれど、絶対設定しておいた方がいいと言われています。

Faviconはこれ

 

プロフ画像は、わたしは実在の人物ですよ〜という信頼感を出したかったので顔写真にしました。

参考にしている海外のイラストレーターさんのサイトでも写真が多かったので、国をまたいで依頼をもらうなら本人の写真で安心感を感じてもらえるからかな〜。と思ったのも理由ですね!

 

まとめ

イラスト用のホームページを自力でつくるとき、デザインを決めていった順番や用意するとスムーズなものなどなど、こうすれば早かったな〜と自分の反省をしながらまとめてみました〜!

決めること

  1. 載せたいメインの作品・メインしたいカテゴリー
  2. ホームページのデザイン、全体イメージ
  3. カラーイメージ

用意するもの

  1. サイトロゴ画像
  2. Favicon画像
  3. プロフィール画像

 

イラスト用のホームページを自力でつくるのって、はい、それなりに大変ですよね(笑)

手をつけるまでは大変だけど、「ホームページがあると他の人へ紹介しやすい」と言われたときは頑張ってよかったな〜と思いましたよ^^ がんばりましょうー!

ここまでの前後の手順も含めて、こ〜んな感じ↓で初心者なりにまとめているのでよかったら参考にしてみてください〜!

まだリンクがない記事は、そのうちに^^

✔︎自力でホームページを作るまでシリーズ

  1. STEP 0 迷う。 自分にホームページは必要?
  2. STEP 1 作る。 どのサービスを使うべき?費用はどれくらい?ざっくり知るためにリストアップ
  3. STEP 2 作る。イラスト用ホームページのデザイン!用意するものリストアップ ←今ここ!
  4. STEP 3 作る。ポートフォリオページにつくりこむ