39.おかねチップス サイトレビュー
お金や仕事、働き方に関する情報を発信するWEBサイト、おかねチップス。内容としてはかなりビジネス寄りの内容ですが、デザインがポップで可愛らしいのでサクサク読みたくなる印象です。Tipsは助言やヒントという意味で、それをお菓子のチップスとかけてポップなページにしている名前のアイデアも面白いと思いました。
掲載されていた記事の中で、元博報堂デザイナーの小杉幸一さんのインタビューがとても面白くて勉強になりました。自分で器用貧乏だと悩んでいる方にはとくに刺さる記事だと思います。こちらもよければ合わせて読んでみてください^^
目的
・お金や仕事の情報を届ける
ターゲット
・フリーランスや副業で働く人
印象
ポップ、かわいい、面白い
キャッチコピー
お金と仕事のTIPSをサクサク検索
特徴
余白
縦90pxほど。コンテンツの量も多く、かなり狭い配置に感じる。
配色
黄色と水色がかなりポップな印象を与えている。この2色は彩度、明度が高くインパクトが強い色なので、細部に使うだけにとどめられている。薄い灰色と少し濃い灰色の組み合わせは少しビジネス的。
フォント
"M PLUS Rounded 1c" 日本語・英語 GoogleFontsから使用
日本語、フォントともに同じフォントを使用。丸っこくて少し癖があるが、可読性も高いと感じた。このサイトのようにポップさを出したいビジネス系のサイトで特に使いやすそう。
詳しいフォントの特徴はこちらの記事から。
メインビジュアル
個性的なメインビジュアル。ピックアップされた記事が順々に流れてくるようになっている。あまり斜めで移動するスライドは見たことがなかったので、すごく印象に残った。
このサイトはターゲットがフリーランスや副業で働く方なので、ITやWEBに明るい人が多いと考えられる。そのため個性的なメインビジュアルを楽しめる人が多いと思う。(WEBに慣れていない人がターゲットの場合は見慣れていて分かりやすい配置が必要なため。)SNSでも話題になりそうだ。
2カラム配置
ブログに多い2カラム構成の配置。最近ECサイトを見ることが多く、2カラムの場合は右側がメインコンテンツになることが多かったため、今回左側にメインコンテンツがあって少し意外な感じがした。ブログのサイトではこの配置が多いのかな。今度他のブログサイトもレビューしたい。
右側のサイドメニューでは、キーワード検索欄、カテゴリー、人気記事、広告で構成されている。背景に灰色を使用していて目立ちすぎずに馴染んでいる。
気づいたポイント
・かなりトレンド感を意識したWEBサイト。TwitterなどSNSのような感覚で見られるカジュアルさを追求しているように感じる。記事のバナーはYoutubeのバナーに近く、下に配置されているタイトルを読まなくても内容がわかる。
・メインビジュアルのPickUpのPの文字だけ水色に。最初の一文字だけ色を変えることで、要素の多いメインビジュアルの中でも自然と目がいくことや、メインビジュアル後もサブカラーを取り入れやすくなる。
・メインビジュアルの背景がただ灰色なだけではなく、濃い色でサイトに関連のある文字を入れている。
→あえて情報量が多いメインビジュアルにしたい場合は文字を装飾して使えそう。
・記事の表紙はYoutubeのように本人写真+記事の要約。記事の内容が一瞬でわかるところがよい。一つ一つ作成するのは大変だけれど、統一感も必要なので、作成した分サイト全体のクオリティがかなり上がっている。
→写真の外枠にタイトルをつけるだけではなく、写真をバナー化してしまうのは情報量の多いサイトで使えそう。
(レビューとは関係ないけれど、ビジネス系Youtubeのまとめサイトがあっても面白いんじゃないかと思った。)
・人気記事の元の背景は灰色だが、ホバーすると白背景+グレーの影になる。iPhoneのようなデザインでスマホで普段スマホに触れる人がターゲットだと相性が良いデザイン。
・記事検索で目立たせたい文字を虫眼鏡のような縁取りにして強調している。
→強調したい部分は単純な丸の縁取りや背景色にするのではなく、何かしらのモチーフにしてみるとより内容が伝わりやすい。
感想
今回はおかねチップスのサイトをレビューしました!すごくポップなサイトで、記事の内容も厚くてよいサイトだなと感じたので、もっと話題になって欲しいサイトだなと感じました。記事を読むことはYoutubeなどで簡単に情報を受け取れるこの時代には少しハードルが高いと感じる人も多いと思うのですが、このサイトのように手軽に記事を読み、楽しめるサイトがもっと広がってほしいです^^
この記事が気に入ったらサポートをしてみませんか？