イケブロの新しいウェブサイトデザイン 制作におけるコンセプトやウラ話

運営者の日記

2019年になってから、空き時間でコツコツ制作していたイケブロの新しいウェブサイトデザインがようやく完成し、2019年4月12日、無事にリリースできました。

せっかくなので、どういうコンセプトで制作したか、どのくらいのスケジュールで制作できたのかなど、ご紹介したいと思います。

制作・デザインのコンセプト

これからの池袋をイメージ

今、豊島区は再開発が進んでおり、前衛的な都市化が進んでいます。

去年の2018年から、そういった背景を意識しながら散策していると、確かに街全体が大きく変わろうとしていることを、肌に感じることができました。

趣味とはいえ、せっかく地域情報サイトを運用していく中で、どうせなら今後の池袋の雰囲気を少しでも踏襲できればと思って完成したのが今のデザインです。

モチーフは豊島区役所の建造物

もっともらしい前置きを並べましたが、正直、ぶっちゃけた話をすると、デザインのモデルはほとんど豊島区役所です。なにしろ、新庁舎になった豊島区役所は、本当にカッコイイ建物なのです。

モダンでシック。とても落ち着くエントランス。

池袋 豊島区役所 イケブロ ウェブサイト デザイン モチーフ

内観は、すごい商業施設へ訪れているような、洗練されたスタイリッシュデザイン。

池袋 豊島区役所 イケブロ ウェブサイト デザイン モチーフ

展望エリアからの建造物の並びなども最高でした。

池袋 豊島区役所 イケブロ ウェブサイト デザイン モチーフ

これらの感銘をウェブサイトへどのように反映しようかなと考えた時、真っ先に思い浮かんだのはフラットデザインとブロークングリッドレイアウトでした。

情報を見やすく分かりやすく

フラットデザインとブロークングリッドレイアウトの意味は、googleの画像検索などで調べるとすぐにイメージしてもらえるかと思います。

そして私が実際にそういったコンセプトのもと制作する中で、とくに気をつけたことが、フラットデザインといっても色味はシンプルに、ブロークングリッドレイアウトといっても崩し過ぎないように、という二点でした。

本当は太陽や森なんかを想定した色味を混ぜたいなとも思ったのですが、カラーの使い過ぎは情報が見づらくなるし、そもそもウェブサイトの中で一番象徴したい主役は「池袋で撮影した写真」だったので、それ以外の情報は極力目立たせないようにしたいと思っての判断です。

レイアウトの崩しについては、ほんの少しだけにしておくことで、テキストや写真を見やすく分かりやすく読んで欲しいと思って、今の形に収まりました。

ただ、一点だけ反省もあり、グレーの色味はもう少し濃くしたほうが良いかなとも思っています。アナリティクス解析を進めていって、読者の年齢層が高そうであれば、そういった修正もどこかでしたいと思っています。

趣味全開のウェブサイト

web制作においては、クライアント様あっての仕事のため、100%自分の好きなように制作することはなかなかできません。

ですが、今回は自分の趣味サイトなので、そういった気兼ねすることは一切なく、100%自分の作りたいように作りました。

とはいえ、そんなに攻めているデザインとかではなく、あくまでwordpressのブログ・メディアサイトというテーマの中で、スムーズな閲覧になるように制作しました。

下記はweb制作していないとイメージつかない内容ですが、具体的に気をつけた点をばらばらと並べてみました。

・パンくずリストは排除
・ハンバーガーメニューは排除
・ありきたりなグローバルナビは排除
・テキストだけのナビゲーションには極力頼らない
・情報の優先度にメリハリつける
・写真とテキストを魅力的に強調させる
・モバイルファーストの徹底

他、wordpress内部的にもっと色々と調整した点もあるのですが、さすがに省略します 笑

制作にかかったスケジュール

本ページまで読んでいるコアな読者の方は、本デザインのリリースまでにどれくらいの日数がかかっているか気になるかと思いますので、参考までにご紹介します。

・構想
→ずっと作りたいな~と思いながら何も行動しない時期 (約半年)

・WF(ラフ案)作成
→約3日

・デザイン作成
→約4日

・コーディング
→約10日

・wordpress調整
→約5日

※あくまで目安です。(空き時間でコツコツ制作していたので、大体の集計数字。)

このように制作を進めていた時間をまとめると、凝縮した制作期間は2~3週間になります。

しかし、実際には2019年になってから、ちょっとずつ進めており、その合間の時間で色々と考えたりもしているので、拘束期間でいえば約3ヵ月です。(逆に、いったん作業ストップして思い出すのに時間かかってたりもするので、とても要領悪し……。)

最後に

ようやく完成したので、ついつい、こういったコラムを書いてしまいました。本記事まで読んで頂いた方には、本当に感謝です。

今後の更新においては、なにかしら池袋散策の役に立つ記事がお送りできればと思いながら、自分も楽しみつつ、趣味でマイペースに運用してまいりますので、今後もイケブロをご愛顧いただけましたら何よりです。