『ミニマム・エッセイ』よりこさんのブログトップページデザイン、ヘッダー、アイコンイラスト作成事例紹介

たっつん

こんにちは、WEBデザイナーのたっつん（@tatsuun7）です♪

先日、ミニマリストブロガーのよりこさんからご依頼いただいてた

が、やっと完成しましたーーー！

かなり前からご依頼いただいてて長らくお待たせしてしまったんですが、満足してもらえてよかったです…！！！

ということで、「ミニマム・エッセイ」のデザイン変更点と、ページを作るにあたって参考にさせていただいてサイト、ヘッダー、アイコンの制作過程などを紹介したいと思います。

ブログトップページ制作

①デザイン打ち合わせ

まず、修正前のデザインがこちら。

変更前はシンプルだけどカラーリングのイメージもあり、少し男性的な印象のデザインです。

白黒ってシンプルでかっこいいけど、どうしても固い印象＝男性っぽさになりがち…！

運営者が女性なので、女性っぽさが伝わるデザインにしていこうと思います。

よりこさんからのオーダーはこちら。

先日、わかやまさんのブログコンサルでヘッダーを変えてみるといいというアドバイスを頂き、たっつんさんも依頼を受けてると聞きました。

合わせて、ブログの全体的なデザインも一新したいと考えています。

ブログのデザインのイメージはponnufさんのサイト。
ブログの配置は、初心者ファッション塾さんのサイト。

カテゴリーは、カーソルを合わせると詳細が出てくるようにしたいです。

ponnufさんのサイト確認して、一色メインとなるカラーがあるシンプルなデザインに方向性を決めました。

よりこさんからいただいたラフ案。

②使用したブログテーマ

以前よりこさんのブログで使用されていたテーマはBlankだったんですが、ミニマリストさんのブログなので「シンプルで洗練されたテーマのほうが良さそう」と思い、WebデザイナーのTAKUMI SHIROMAさん（@made_mode）が制作された「SOHO」に変更しました。

カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました – NO TITLE

シンプルでカスタマイズがしやすい素晴らしいテーマ！

【スマホビュー】

左上のハンバーガーメニューをクリックすると、横からにゅっとカテゴリメニューがでてきます。

そして、スクロールすると上部にブログタイトルがテキストで表示される仕様なんですが、ここに画像差し込んでヘッダーと同じ画像が表示されるようにしました。

③ブログトップカスタマイズ完成

【Before】

変更前はシンプルだけどカラーリングのイメージもあり、少し男性的な印象のデザインでしたね。

そして、記事一覧が並んでいるだけのページになっていました。

【After】

ブログのテーマが「ミニマリスト、シンプルでストレスフリーな生活」なので、シンプルな装飾に抑えつつ、ワンポイントカラー、アイコンを入れることで女性らしさをプラスしました。

また、トップページには

を表示。

各カテゴリもポイントにアイコンを使って、シンプルかつわかりやすいページに仕上げました。

トップページなので、見やすいよう1カラムレイアウトに。

今回、初めてはてなブログのトップページ作らせてもらったんですが、少し前に搭載された固定ページを使って、トップページとして代用しています。

④参考にさせていただいたサイト

今回トップページ作るにあたって、以下のブログやサイト参考にさせていただきました！

意外と苦労したのが、WEBアイコンのFont Awesomeの扱い方。

はてなの謎仕様で見たままモードやとFont Awesomeが正しく表示されなくて、サイドバーはちゃんとでてるのに、トップページはなぜか表示されない…など、地味なところで四苦八苦しました。

ブログヘッダー制作

①デザイン案打ち合わせ

よりこさんからのオーダー。

全体のイメージはブログと同じくponnufさんのサイト。
基本の色は黄緑と緑の間のような色で、シンプルで統一感のあるものが理想です。

ブログ名の変更を考えていて、「よりこのミニマムエッセイ」にしようと思ってます。

「よりこの」というところをアイコンでちょこんと付け加えてもらいたいです。

ヘッダーの文字はオシャレな感じで、
アイコンで「よりこの」というところでゆる〜い感じを出したいと思ってます。

ラフイメージ制作。

最初は「よりこのミニマムエッセイ」というのが希望案だったので、こちらのデザイン案だったのですが、途中で「作ってもらったのを見て感じたのですが、『よりこのミニマムエッセイ』よりもすっきりとミニマムエッセイにした方がいいですかね？」という相談されたので、

「シンプルがいいなら”よりこの”はいらないと思います」

とお答えして、名前なしバージョンで話が固まりました。

②制作過程

暗号みたいなのとか要素バラバラのものも作りましたが、ボツ案行き。

たっつん

ガサゴソ旅女会さん、『就活ガチャ』マコザネさんのヘッダー作った時も思ったけど、ヘッダーって未だにできるまでに寄り道しすぎる…。

もっと本読んで知識蓄積したい。

こちらは提案したカラー。

黄緑と緑の間のような色をご希望されていたので、その範囲で収めつつ年相応の落ち着いた色をピックアップしました。

たっつん

でも、緑色って若々しくなりすぎるか落ち着きすぎるかで、だいぶ悩みました…。

4番は黄緑と緑の間じゃなくてどちらかというと落ち着いた青みの緑なんですが、個人的に大人っぽさも出しつつポップな感じもしてかわいいなあと思ったカラーだったので、ねじ込みました（笑）

最終的にこのカラーが気に入ってもらえてよかったです♪

③ブログヘッダー完成！

で、完成案がこちら。

できるだけ無駄な要素を排除しつつ、女性らしさも感じられるミニマムなデザインで作成しました。

【Before】

以前はヘッダーがなくて、テキストでの表示になっていました。

【After】

女性らしさもイメージできるヘッダーになりました！

アイコンイラスト制作

①ラフ打ち合わせ

たっつんさんのイラスト集の中で、イメージを伝えますね。

・全体の絵のタッチ、イメージ
→さびこんさん

・色合い
→もちこさん
ほぼ1色で統一感のあるもの。持っているプラカードを違う色で。

そして、これがいただいたアイコンラフ案。

タッチがさびこさん風、色がもちこさん風ということで、それぞれ参考にしながらイメージ作っていきました。

②アイコンイラスト制作過程

『たけさんぽ』のたけしさんアイコン作成したときもあったんですが、私のイラスト縦か横に伸びがち！！！（笑）

たっつん

いいバランスでイラスト描けるようになりたいなー。

イラストスケッチする時間作って練習しよう…

③アイコンイラスト完成！

てなわけで、完成したデータがこちら。

ヘッダーと同じくメインカラーに#66cdaaを使いながら、配色を考えてボード部分には#ffa98dを使いました。

【ビフォーアフター】

以前のイラストイメージから、ガラッとイメチェンしました！！

ブログデザイン変更後の反響

よりこさんはもちろん、他の読者さんにも「かわいい～♡」って言ってもらえて安心しました！

とはいえ、私が作ったのはトップページコンテンツ部分とヘッダーだけなので、やっぱりシロマさんのテーマがシンプルで美しくてほんまに素晴らしい件…！！！

まとめ

以上、よりこさんのブログトップページデザイン、ヘッダー、アイコンのご依頼内容でした。

よりこさん、お時間かかってしまいましたが、満足していただけてよかったです～♪
ご依頼ありがとうございました！またご飯いきましょ～～♡

似顔絵・アイコンイラスト依頼はこちらから！

個人ブロガーさん、企業さんのアイコン、ヘッダー作成など受け付けております。

詳しいメニュー、納期に関しては以下からご確認・お問い合わせ下さい。

アイコン・アイキャッチイラスト・ヘッダー・図解イラストの依頼について

イラスト制作のスケジュールにより、納品までお時間いただくことがございます。

ご理解いただける方のみご依頼下さい。何卒よろしくお願い致します。

依頼料金・イラストポートフォリオについては、以下からご確認ください。

合わせて読みたい

ヤギレンタさんのブログ『レンタメ』ヘッダー依頼、作成事例

合わせて読みたい

ブログ『就活ガチャ』マコザネさんのヘッダー＆アイコンイラスト制作事例紹介

合わせて読みたい

ブログ『雲外蒼天』えむさんのアイコンイラスト・ブログヘッダー依頼・制作事例

たっつん

イラストレーター

TwitterFacebookInstagramYouTube

元々、職歴も貯金も恋人もいないフリーターから、ブログをきっかけにフリーランスに転身。 そして、気づいたら一度は諦めたイラストレーターにちゃっかりなってました。 夢だった書籍イラストのお仕事をしています。