こうだったのが、
こうなりました！
ここです！ ここが新しくなりました！
抹茶スイーツブログ『ゲムぼく。』、プチリニューアル！
これは、Webサイトの「ヘッダー」と呼ばれる部分で、おもに、そのサイトのメインビジュアルやタイトルを載せるところ。看板みたいなものだ。これを刷新した。看板を張り替えた。
作り方はいろいろあるが、今回は「背景」と「ロゴ」の2枚の画像の組み合わせで作っている。
背景が、これ。
左側がこのブログを構成するいろんな要素を示すアイコン、右側がマスコットペンギン「ぺんぎんぎん。」。
左右にまったく違う物を配置しながらも、線の太さに気をつけたり、どちらも山型のシルエットになるようにしたりして、統一感を出している。
ロゴが、これ。
著書『人生は良ゲー。』のフォントが気に入っているので、それに近いものにした。
これらは、Canva、GIMP、ibisPaint、PowerPointを併用して作った。
基本的にはCanvaが便利だが、素材の線の太さを調整したいときや、そもそも自分で素材を描いたほうが早いときも多いので、それはGIMPやibisPaintが適切。
また、背景とロゴを組み合わせた際の位置を検証・微調整するには、PowerPointが意外と使い勝手がよい。
背景とロゴを組み合わせると、こうなる。
今回、レスポンシブデザインにした。つまり、デバイスの画面サイズに合わせてちょうどいい表示になるようにしている。
限度はあるが、少なくとも一般的なスマートフォンやフルHDのPC画面などなら問題なくいい感じに表示されるはず。
ただ、レスポンシブ対応の画像をド素人がデザインするというのはかなり大変で、サイズやレイアウトの調整にはかなりの時間を要した。
WordPressで作っている独自のブログなので、どこかにマニュアルや手本があるわけではなく、ぜんぶ自分で考えて試さないといけないし。
試しては直し、試しては直しを繰り返して、気がつくと背景画像だけで44パターン作っていた。
試行錯誤の例としてわかりやすいのが、各要素の配置。
最初はこれくらいだったが、いじるうちに「もう少し要素を増やしたほうがいいな。あと、左右のシルエットを山型でそろえるとキレイだな」となっていき、
こう変化していって、「おっ、いいじゃん！」となった。
なったのだが、これだと、別途制作したロゴを重ねたときに……
利用者が多いであろうiPhoneやフルHDの画面で見た際、アイコンとして重要度が高いゲームコントローラーとご飯が隠れてしまうことに気づいた。
「まあいいか……」と思って、8/21（金）時点ではこれで公開していたのだが、寝て起きたらやっぱり気になってきて、本日8/22（土）にまた微調整して……
こうなった。
左側の配置を調整して、山型のシルエットは守りつつ、重要度の高いアイコンがより確実に見えるようにした。
けっきょく、「作ってみよう」と思いついてから現在の形になるまで、トータルで4時間くらいかかった。
Webデザインは大変だ。どの分野でも言えることだが、自分でやってみると、その道のプロのすごさがよくわかる。Webデザイナーになれる気がしない。難しすぎる。
ちなみに、昔のヘッダーがこういう感じだった。
やっつけで撮った写真を使っているし、タイトルロゴなんかないしで、だいぶゆるい。
これはこれでいかにも個人の趣味ブログらしさがあって味があるのだが、そもそもで言えば、他者の著作物が写っているのがよくない。SNSのアイコンやヘッダーにアニメの画像を使っているようなものだ。いちおう見逃してもらえる範囲ではあると思うが、よいかよくないかで言えば、当然よくない。
個人の趣味ブログにしては規模がまあまあ大きくなっていて人目に触れる機会が多いという実情もあるので、オリジナルにしたほうがいいな、とは前からうっすら思っていた。
結果、ある日いきなり思いついていきなり作ったにしては、いいものができてよかった！
今後も微調整していくことはあると思うが、基本はしばらくこれでいくぞ！
特に、このへんのアイコンの取捨選択と配置は『ゲムぼく。』というブログを端的に表せていて、かなりお気に入り。
ノンジャンルのブログではあるが、ざっくり言えば記事の8～9割はこのどれかに当てはまるので、これが抹茶スイーツブログ『ゲムぼく。』のほぼすべてだと言って過言ではない。
今後とも、抹茶スイーツブログ『ゲムぼく。』をよろしくお願いします。
抹茶スイーツブログ……？
コメント
これ自分で作ったんだ……いやゲムぼく。なら作るよな……
すごい！可愛い！多才！
ヘッダーから省かれる抹茶スイーツ要素に悲し…くもない残当な過去…
ご飯のアイコンが食べ物つながりで抹茶スイーツを含んでるかも？いや苦しいか
ぺんぎんぎんの先が微妙に写り込んでるの作為を感じる
抹茶スイーツブログ…？
VTuberとかアイドルとかはファンやリスナーに特殊な呼称を付ける文化があるからさあ
ゲムぼく読者の俺たちが抹茶スイーツになれば解決だな
自分もワードプレスでブログやってるので真面目に参考になりました
でもこんなに綺麗には作れなさそう…
外注しても良さそうなのに…
あっ友達いないのか
むちむち要素は……ぺんぎんぎんか。ぺんぎんぎんでいいのか？
グルメに含まれてるってことで・・・
フッターにもロゴ入れましたよね。めっちゃかわいくてすきです。
右のペンギンとギンギンも合わせて9割ありそう
ぺんぎんぎん出世したな…
自分もCanvaで色々デザイン作ったりしていますが、本業の人はこれ以上に綿密に調整されたものを作ってると思うと、今回のヘッダーにおけるゲムぼくさんの凝りっぷりは見習いたいと思いました。
ところでこれは極めて個人的な意見なのですが、今までのヘッダーに飾られていた『ゲームはぼくの人生だ。』という文言も、小さくともどこかに残しておいてほしいなとちょっと感じました。元々この文言がなんとなく好きだったのもありますが、『ゲムぼく。』という大事なネーミングの由来でもあると思うので……
ご検討のほど、お願いいたします。
抹茶スイーツブログと思って見に来てる人はいないから大丈夫
それよりむちむち要素は…？ぺんぎんぎんが一手に担ってるのかな
こうやって見てみると
ジャンル不詳すぎるな
何のブログなのか説明しづらい
ぺんぎんぎん。すき
ぺんぎんぎんのぎんぎんを見切れさせて腹の模様に擬態させることでギリギリ社会性を保とうとしている小賢しいヘッダー
Illustratorを使わないでここまで出来るのは凄いです！
以前に比べ視認性が確保されている点、ロゴについて、プロに任せて作ったであろう著書のフォントに寄せたのもデザイン的に適切に思います
抹茶要素…思い切って背景を抹茶色にするとかいかがでしょう
ぺんぎんぎんのぎんぎんがちょっとだけこんにちぎんぎんしてるから、おそらく自作だろうなとは思っていたけども！
抹茶スイーツよりぺんぎんぎんのぎんぎんが目立つブログ……
ゲームはぼくの人生だ。自分も復活希望
抹茶スイーツはまあ、行けたら行くくらいで
ニップレスが足りない…
ぺんぎんぎんのぎんぎんがちょっと見えてて草
何のジャンルか聞かれたら女子禁制ブログでいいよ
「韓国 旅行 グルメ」 あたりで間違って引っ掛かりそうなブログだから注意しないと
ぺんぎんぎん。ページ下部だけでなく上部にも常駐できて良かったねぇ
ぺんぎんぎん。のお部屋みたいでかわいいねぇ
…ところで、旅行おでかけを象徴しているアイコンは飛行機ですか？(間違ってたらごめんなさい)
自作するとその過程を記事にもできてお得だぁ！
毎日読んでいて、あれ・・・ヘッダー変わった・・・？（2版目の初代からの引き継ぎ具合も好きだったので）と思っていましたが、解説記事まであってﾒﾁｬ嬉しいです
ビタミンカラーの元気いっぱいさで、今後のムチムチ記事も楽しみにしています
ぺんぎんぎんが出世して、嬉しい限りだよ。
tシャツ出して。
オレンジ色
爽やかでいいイメージカラー
ゲムぼくらしいようならしくないような
抹茶スイーツブログを名乗るなら黄色をやめて、緑色ベースにしなさい！
完璧で究極のヘッダー
金輪際現れない一番星のヘッダー
シンプルで今っぽい感じ
かわい〜
いいですね、ペンギンの存在感がたまらない
ぺんぎんぎん。もいよいよ名実共に名物マスコットになりつつあるな
逸物さえ映さなければ普通のペンギンのキャラだから看板キャラ面ができてしまうのがたちの悪いところだと思った
むしろ4時間で出来るんだ…という感想
ぺんぎんぎんTシャツ……？
好きなものを全部詰め込んだ感じが好感が持てる
グ……グルメの中に内包されているから……！スイーツとは真反対の山盛りご飯だけど……！
ぺんぎんぎんのぎんぎんを隠す配慮を持ってる抹茶スイーツブログ
Canva使った事ない…
ロゴのテキスト、本と似てていいっすね
素材から作ってるのすごいわ
形がシンプルで名刺とかに転用しても良さげないいヘッダー
元気な感じでかわいい！
何を考えながら作ったのかとか試行錯誤の過程を知るの面白いから好き
すごいぜ！まじで
素材から作ってるのすごい
ペンギンかわいいです
ゲムぼく。が自ら生み出した存在なので、色々とフリーダムなのがぺんぎんぎんの強みであり凄いところ
子供が増えたよやったねパパぼく！