副業サイトの記事ページデザインを革新したリニューアル案件

目次

1.クライアントの課題と提案した解決策

2.業務の流れ

3.Contact

4.Other Works

1.クライアントの課題と提案した解決策

【クライアントの3つの課題】

①トップのデザインが素っ気ない

②記事本文を読んだり、SNSシェアをするまでに労力が掛かる

③プロ副業らしい独自のデザインにしたい

【改善前の記事トップページデザイン】

【提案した3つの解決策】

①記事のアイキャッチ画像の色によって背景色が変化するユニークなデザインにする

②記事を開いた最初の画面内に必要な情報をまとめる

③プロ副業サイト全体を統一したデザインにリニューアルする

【改善後の記事トップページデザイン】

それぞれ具体的に説明していきます。

【課題①】トップのデザインが素っ気ない

サイトロゴ、記事タイトル、アイキャッチ画像の周辺に白色の余白が多く、記事を開いたときに素っ気ない印象を受けるのが問題点でした。

【提案した解決策①】記事のアイキャッチ画像の色によって背景色が変化するユニークなデザインにする

上記の「digmee」「クラウドソーシング」の記事のように、アイキャッチ画像の色が変われば、トップの背景色全体の色も変わるようになっています。

こうすることで、以下のようなメリットが得られます。

• 記事毎に背景が変化するのでユーザーを飽きさせない
• アイキャッチ画像のテイストを変えても問題ないため、保守性に優れている
• 素っ気ない印象からインパクトのあるデザインになる

このようなメリットによって、クライアントの「トップのデザインが素っ気ない」という課題を解決しました。

【課題②】記事本文を読んだり、SNSシェアをするまでに労力が掛かる

記事を開いた最初の画面では、アイキャッチ画像の途中までしか表示されません。

記事本文を読むためには、1画面分スクロールする必要があり、早く本文を読みたいユーザーにとっては無駄な労力を掛けてしまいます。

また、SNSシェアをするためのボタンが分かりづらく、Webサイトの操作になれていないユーザーにとっては、扱いづらいです。

【解決策②】記事を開いた最初の画面内に必要な情報をまとめる

リニューアル後のデザインでは、記事ページを開いた最初の画面に必要な情報を全てまとめるように致しました。

• ヘッダー/サイトロゴ
• 記事カテゴリー
• 記事更新日付
• 記事タイトル
• SNSシェアボタン
• 記事アイキャッチ画像
• 記事本文

以上全ての情報を最初の1画面内に収めています。

特に「記事本文」が最初の画面に見える様になったことで、ユーザーはファーストビューからスムーズに記事本文を読み始めることができます。

また、SNSシェアボタンは主要な4つのSNSリンクを見易く配置することで、Webサイトを使い慣れていないユーザーも操作しやすいデザインとしました。

【課題③】プロ副業らしい独自のデザインにしたい

改善前のサイトでは、多くのサイトに使われている人気のデザインテンプレートが使われていました。

しかし、プロ副業にしかない独自のデザインにすることで、少しでも印象に残したいという課題を抱えていました。

【解決策③】プロ副業サイト全体を統一したデザインにリニューアルする

クライアントがプロ副業サイトに持たせたい印象は、以下の通りでした。

• 副業について親身に相談に乗ってくれるサイト
• スピーディに適切な情報を提供してくれる

これらをデザインに落とし込むために、デザインの方向性は以下のようにまとまりました。

• デザインに斜めラインを入れて「スタイリッシュな印象」を持たせる
• レイアウトに角丸を入れて「柔らかい印象」を持たせる
• フォントは丸みがあり、可読性が良い種類
• サイトカラーは万人受けし、信頼感のある「青色」ベース

【PC表示】

【モバイル表示】

【記事の見出しデザインの変更】

以上のように、プロ副業サイトの印象をデザインに落とし込むために、「サイトカラー」「フォント」「レイアウト」などを独自に設計致しました。

2.業務の流れ

デザインデータを制作した段階で、クライアントと打ち合わせをして、ご要望どおりのデザインにするため修正を加えました。

デザインが完成すると、デザインデータを基にWebページで表示させられるようにコーディング作業に移ります。

コーディングの際は、クライアントが運営なされているWebサイトに悪影響を及ぼさないために、バックアップ・環境の構築を徹底しております。

コーディング作業まで完了し、クライアントのご確認を頂いて、業務完了となります。

Contact

お仕事のご依頼・お問い合わせの際は、LINE＠へお送り下さいますと、スムーズにお返事ができます。通知や広告などは一切届きませんので、お気軽にお問い合わせ下さい。

※下記のQRコードをスキャンするか、IDより友達追加ができます。

LINE@ID ： @design-innovators

【IDからの追加方法】

１．LINE友だち追加の「検索」画面へ

２．ID入力欄に上記IDを入力

※@の入れ忘れにご注意下さい

Other Works

完全オーダーメイド制作！フリーランサーが作るWebサイトの魅力とは

↑　　Check me♪　↑

○ - - - - - - - - - - - - ○