つみきは、Webメディア・集英社オンラインの設計・UIデザインを担当しました。

集英社オンラインは幅広くエンタメを創出してきた集英社が、これまでに培った知的・人的アセットをフル活用して提供するスマートフォン向けWebニュースメディアです。

新しい”好き”との出会いに満ち溢れる日々を読者へ届けたいという想いから、「毎日が、あたらしい」をコンセプトにしています。

複数コンテンツを整理したワイヤー設計

「集英社オンライン」は、集英社が持つ幅広い領域の情報やコンテンツが発信されるメディアです。
その特長を活かし、カテゴリー別の最新記事や関連記事をあわせて表示させることで、サイト内を回遊できる設計にしています。

また、幅広い情報に興味を持ってもらえるように検索メニューをリッチ化。トレンドのタグや著者を表示させるなどのフックづくりを行いました。

デザインキーワードの定義から、トンマナを設計

まず、他のメディアサイトを俯瞰できるようマッピング。そのなかで「集英社オンライン」がどこに位置するのか可視化するところからスタートして、デザインの方向性を絞っていきました。

そのプロセスを通じて、「オシャレ」「信頼感」「ポップ」をキーワードとして策定。メディア最大手としての信頼感と読みやすさをベースにしながらも、ポップな印象を感じられるデザインをゼロからつくりました。

シンプルさとポップさを両立したデザイン

ベースのトーン＆マナーに沿って、シンプルさ、オシャレ感、ポップ感がバランス良く表現できるよう、あしらいを工夫しています。モチーフを大きく目立たせ過ぎると、ポップ感が強すぎてしまうため、ベーシックなレイアウトを用いて信頼感とのバランスをとりました。

見出しのあしらいや、数字の見せ方など、モチーフをワンポイント的に使うことで、全体的にシンプルさとオシャレ感の両立を図っています。

また、余白をとり、手書き風のフォントを用いることでポップ感を際立たせています。

・・・

つみきでは、アプリやWebサイトのUIデザインを手掛けています。遊びごころとアイディアで、ユーザーの心を動かすデザインを得意としています。アプリ・Webサイトの立ち上げやリニューアル・改善をご検討の際は、ぜひお気軽にご相談ください。