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

[chat face=”tatsu_icon.png” name=”たっつん” align=”left” border=”red” bg=”none”]こんにちは、WEBデザイナーのたっつん（@tatsuun7）です♪[/chat]

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

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

ミニマム・エッセイ

よりこさんブログデザイン

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

たっつんさん@Tatsu_2015にブログのデザインしてもらった～！ #はてなブログ
【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイhttps://t.co/JxMsCwk9bj

— よりこ｜エセミニマリスト (@Ni6Hmrr9HNZeZbX) 2017年11月12日

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

ブログトップページ制作過程紹介

ブログデザインのBefore〜After

変更前のブログデザインと変更後のブログデザイン紹介します。

【Before】

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

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

そして、改良後がこちら。

【After】

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

トップページには

を表示。

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

トップページなので見やすく1カラムレイアウトにしました。

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

打ち合わせ

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

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

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

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

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

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

使用したテーマ

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

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

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

スマホビュー

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

すばらしい…！！！

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

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

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

サルワカさん
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
CSSで作る！押したくなるボタンデザイン100（Web用）

minimalgreenさん
はてなブログのトップページをWordPressの固定フロントページっぽくし、ホームページとして活用する方法 – Minimal Green

つばささん
つばさのーと

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

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

ヘッダー制作過程

デザインBefore After

Before

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

After

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

打ち合わせ

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

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

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

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

最初は「よりこのミニマムエッセイ」というのが希望案だったので

名前、アイコン入りバージョンも作ったんですが、途中で「作ってもらったのを見て感じたのですが、『よりこのミニマムエッセイ』よりもすっきりとミニマムエッセイにした方がいいですかね？」という相談されたので、

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

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

制作過程

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

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

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

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

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

[chat face=”tatsu_icon.png” name=”たっつん” align=”left” border=”red” bg=”none”]でも、緑色って若々しくなりすぎるか落ち着きすぎるかで、だいぶ悩みました…。[/chat]

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

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

ヘッダー完成！

で、完成案がこちら。

アイコン制作過程

デザインBefore After

Before

After

以前のものから、ガラッと変わりました！

打ち合わせ

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

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

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

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

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

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

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

[chat face=”tatsu_icon.png” name=”たっつん” align=”left” border=”red” bg=”none”]いいバランスでイラスト描けるようになりたいなー。イラストスケッチする時間作って練習しよう…[/chat]

アイコンイラスト完成！

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

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

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

素敵〜、可愛い〜、羨ましい♡ / “【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ” https://t.co/7hr3uUUfMc

— okeiko@はてなブログ (@okeiko_life) 2017年11月12日

一気に雰囲気変わりましたね！ / 他3コメント https://t.co/sJ8V0CaBot “【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ” https://t.co/N6GabN6zLQ

— 箱根ヶ崎P.N.3@はてな (@pn3pn3) 2017年11月12日

素敵ですね〜♡コンサルもデザイン外注も気になる！ / 他4コメント https://t.co/SZ4GpQ7ue1 “【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ” https://t.co/2kztKgc34h

— ぱぴこ@ミニマリストinアメリカ (@papiko8l) 2017年11月13日

ステキなデザイン！いつもスマホからしか見ないけど、PCでもみてみます(^^) / 他7コメント https://t.co/u7PVEgHfud “【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ” https://t.co/mWKpwrKiAN

— あき@はてなブログ (@akisan0101) 2017年11月13日

とてもおしゃれですね〜〜！(*´-`)

— えみLOG (@s_tanoshiku2017) 2017年11月15日

ブログデザインわからな過ぎて今すぐにでもお願いしたい(*´-`)ライブドアブログもしてくれるかな。(*´-`) https://t.co/BT6VyxUh7h

— えみLOG (@s_tanoshiku2017) 2017年11月15日

全てはあの日のコンサルから始まってたんだね…笑　めっちゃ素敵なデザインになってますよー！ / “【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ” https://t.co/jMQP9h1OvU

— わかやまゆうや (@shaining224) 2017年11月16日

【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ

• [はてなブログ]

 

とても素敵です～よりこさんのアイコンも可愛いです＾＾　PCでもスマホでもチェックしてしまいました。たっつんさん素晴らしいですね！

2017/11/13 22:43

【ブログリニューアル】私のブログが超絶オシャレになったわけ – ミニマム・エッセイ

すごくかわいい！！

2017/11/16 12:12

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

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

まとめ

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

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

朝起きたら、自分のブログが超絶オシャレに可愛くなってる＼(^o^)／きっと妖精の仕業だな😊

— よりこ｜エセミニマリスト (@Ni6Hmrr9HNZeZbX) 2017年11月10日

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

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

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

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

常にイラスト依頼が殺到しているため、納品までお時間いただくことがございます。

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

依頼料金・イラストポートフォリオについては、以下からよろしくお願いいたします。

https://subcul-girl.com/?p=350

https://subcul-girl.com/?p=84

https://subcul-girl.com/?p=44

たっつん

イラストレーター

TwitterFacebookInstagramYouTube

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