イラスト

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

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

 

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

  • ブログのトップページとトータルカスタマイズ
  • ヘッダー
  • アイコン

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

 

ミニマム・エッセイ

よりこさんブログデザインよりこさんブログデザイン
よりこさんアイコンイラスト

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

 

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

 

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

ブログデザインの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さんのサイト。
基本の色は黄緑と緑の間のような色で、シンプルで統一感のあるものが理想です。

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

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

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

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

 

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

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

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

 

制作過程

よりこさんブログヘッダー
よりこさんブログヘッダー
暗号みたいなのとか要素バラバラのものも作りましたが、ボツ案。

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

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

 

よりこさんアイコンイラスト
こちらは提案したカラー。

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

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

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

 

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

 

ヘッダー完成!

よりこさんブログヘッダー
で、完成案がこちら。

 

アイコン制作過程

デザインBefore After

Before
よりこさんアイコンイラスト

After
よりこさんアイコンイラスト

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

 

打ち合わせ

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

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

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

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

よりこさんアイコンイラスト

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

 

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

よりこさんアイコンイラスト
よりこさんアイコンイラスト
よりこさんアイコンイラスト
よりこさんアイコンイラスト

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

たっつん
たっつん
いいバランスでイラスト描けるようになりたいなー。イラストスケッチする時間作って練習しよう…

 

アイコンイラスト完成!

よりこさんアイコンイラスト

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

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

 

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

 

 

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

 

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

2017/11/13 22:43

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

すごくかわいい!!

2017/11/16 12:12

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

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

 

まとめ

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

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

 

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

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

  • アイコンイラスト
  • ブログヘッダー作成
  • 図解イラスト

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

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

 

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

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

 

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

 





イラストの依頼・納期等お問い合わせ等は、下記フォームをご利用ください。
内容を確認し、5日以内にこちらからご連絡いたします。

 

レンタメヘッダーイラスト作成
ヤギレンタさんのブログ『レンタメ』ヘッダー依頼、作成事例はてなブログ『レンタメ』ヤギレンタさんのヘッダー、制作事例紹介。...
マコザネさんアイコンイラスト
ブログ『就活ガチャ』マコザネさんのヘッダー&アイコンイラスト制作事例紹介 今回、「就活ガチャ」のマコザネさん(@makozaneee)のヘッダー&アイコン作成させていただいたので、紹介していきますね♪ ...
えむさんアイコンイラスト作成
ブログ『雲外蒼天』えむさんのアイコンイラスト・ブログヘッダー依頼・制作事例ブログ『雲外蒼天』のえむさんのアイコンイラスト&ヘッダー作成させていただいたので、制作過程を紹介していきます!...
ABOUT ME
たっつん/イラストレーター
たっつん/イラストレーター
大阪在住のブロガー&イラストレーターのたっつんです。2017年からフリーランスとして活動中。 アラサー独身女性の生き方や好きなものについてつづるブログです。詳しいプロフィールはこちら
関連記事

COMMENT

メールアドレスが公開されることはありません。