とどろけ!サブカル女子

アラサーサブカル女の雑記ブログ

『ミニマム・エッセイ』よりこさんのブログトップページデザイン、ヘッダー、アイコン作成致しました!

スポンサーリンク

f:id:ok723:20171115144655p:plain


どうも、WEBデザイナーのたっつんです

先日、ブログ友達のよりこさんからご依頼いただいてた

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

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

ミニマム・エッセイ

f:id:ok723:20171115155938p:plain
f:id:ok723:20171115160002p:plain

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

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

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

デザインBefore After

変更前のブログデザインと変更後のブログデザイン!

Before
f:id:ok723:20171115221132j:plain
変更前はシンプルだけど、少し男性的なデザインでした。
そして、記事一覧が並んでいるだけのページです。

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

トップページには

  • 新着記事
  • カテゴリ
  • おすすめ記事
  • プロフィール、ツイッター

を表示。

f:id:ok723:20171115221154p:plain
各カテゴリもポイントにアイコンを使って、シンプルかつわかりやすいページに。

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

打ち合わせ

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

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

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

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

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

f:id:ok723:20171116192523j:plain
よりこさんからいただいたラフ案。

使用したテーマ

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

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

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

スマホビュー
f:id:ok723:20171116153040p:plain

左上のハンバーガーメニューをクリックすると横からにゅっとカテゴリメニューがでてきます。すばらしい…!!!
f:id:ok723:20171116153044p:plain


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

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

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

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

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

つばささん
つばさのーと

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

ヘッダー制作過程

デザインBefore After

Before
f:id:ok723:20171116150238j:plain
以前はヘッダーがなくて、テキストでの表示でした。

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

打ち合わせ

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

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

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

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

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

f:id:ok723:20171116150957p:plain
f:id:ok723:20171116150807p:plain
名前、アイコン入りバージョンも作ったんですが、途中で

「作ってもらったのを見て感じたのですが、『よりこのミニマムエッセイ』よりもすっきりとミニマムエッセイにした方がいいですかね?」

という相談されたので、「シンプルがいいなら”よりこの”はいらないと思う」とお答えして、名前なしバージョンで話が固まりました。

制作過程

f:id:ok723:20171116151317p:plain
f:id:ok723:20171116151322p:plain
暗号みたいなのとか要素バラバラのものも作りましたが、ボツ案。
ガサゴソ旅女会さん『就活ガチャ』マコザネさんのヘッダー作った時も思ったけど、ヘッダーって未だにできるまでに寄り道しすぎる…。もっと本読んで知識蓄積したいなぁ。

f:id:ok723:20171116151417p:plain
これは提案したカラー。
黄緑と緑の間のような色が希望だったので、その範囲で収めつつ年相応の落ち着いた色をピックアップしました。

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

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

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

完成

f:id:ok723:20171116152823p:plain
て、わけで完成案。

アイコン制作過程

デザインBefore After

Before
f:id:ok723:20171116154443j:plain

After
f:id:ok723:20171116154447p:plain

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

打ち合わせ

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

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

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

そして、これがいただいたアイコンラフ案。
f:id:ok723:20171116192556j:plain

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

制作過程

f:id:ok723:20171116154854j:plain
f:id:ok723:20171116154858p:plain
f:id:ok723:20171116154846p:plain
f:id:ok723:20171116154850p:plain

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

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

完成

f:id:ok723:20171116154850p:plain

てなわけで、完成品がこちら。

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


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



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

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

2017/11/13 22:43

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

すごくかわいい!!

2017/11/16 12:12


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

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

まとめ

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

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


多分、ブログデザイン依頼はしばらく受けません(笑)

ヘッダーとアイコンは今後も受け付けておりますので、以下からご依頼くださいませ♪

f:id:ok723:20171116155925p:plain
記事寄稿、記事広告、レビュー依頼、バナー広告掲載、イラスト作成のご依頼について - とどろけ!サブカル女子