- 自主制作
- ホームページ制作
育児4コマブログ モヒカンパパVSパワフル赤ちゃん戦記
Overview概要
エンジニアになる前に運営していた、育児4コマ漫画ブログのフルリニューアルです。サイバー攻撃で全記事を失った経験から、セキュリティを一から見直しました。4コマを「気分」で選べるカテゴリと、にぎやかな動きの演出で、漫画を読む楽しさを底上げしています。
Challenge課題
エンジニアに転職する前、自分で描いた育児4コマ漫画をブログで公開していました。ところが、そのサイトはサイバー攻撃の被害にあい、記事がすべて削除されてしまいました。
- 当時は知識がなく、何が起きたのかも、どう防げばよかったのかもわからなかった
- デザインも、漫画の世界観を伝えきれるものではなかった
- 160話を超える4コマを、新しい順か話数の順でしかたどれず、読みたい話を選ぶ手がかりが少なかった
Approach取り組んだこと
それから数年。スキルと知識を身につけ、セキュリティを一から見直したうえで、「読みに来た人がにぎやかで楽しい気持ちになるサイト」を目指して作り直しました。イラストの上手さではなく、サイト全体の演出で漫画を盛り上げています。
- 色の帯と波でにぎやかに：黒い太枠や影に頼らず、水色・クリーム・白の帯を波でつなぎ、水玉やグラデーションの見出しで彩りました
- 全力の動き：見出しの文字が1文字ずつ跳ね、ボタンはぷるんと揺れ、カードはホバーでぴょんと浮きます。動きを減らす設定にしている人には、動かさずに表示します
- なるみんが飛ぶ：トップの絵の中のキャラクター「なるみん」が、ときどき画面を横切って飛び、また元の場所に戻ってきます
- 気分で選ぶ4コマ：4コマに「たのしい・うれしい・かなしい・やばい」の気分カテゴリを付けました。トップの「きょうの気分で読む」では、気分ごとに色・背景の演出（紙ふぶき・ハート・雨・集中線）・カードの並べ方・ホバーの動きを変えています
- 同じ気分の話を続けて読める：記事の下に、付いている気分ごとの「前の話・次の話」を並べ、気分の一覧から記事、次の話へと読み進められるようにしました
- 漫画が主役の記事ページ：4コマのまわりでは動きを控えめにして、漫画を読む邪魔をしないようにしました
- 漫画の世界観をデザインに：雲や太陽、キャラクターの絵を組み合わせてタイトルロゴを作り、メニューにもキャラクターの文字を使いました。漫画に登場する家族を紹介するページも用意しました
- セキュリティの見直し：被害にあった経験と、保守の仕事で得た知識をもとに、不正なログインや改ざんへの対策をしました
Result結果
一度は失ったブログを、読むだけでにぎやかで楽しくなるサイトとして再出発させることができました。新しい話から順に追うだけでなく、その日の気分で4コマを選び、同じ気分の話を続けて楽しめます。
サイバー攻撃を受けた側の悔しさを知っていることは、いまの保守・復旧の仕事にもつながっています。
Galleryギャラリー
//contact
このような制作について相談する
お問い合わせフォームに、この実績をご覧になっての相談だと書き添えてお送りします。
相談する
