夏のキャンペーン実施中! 10%割引券をプレゼント >詳しくはこちら<
HOMEブログ 【iichiのウラ側】スマホサイトも日々進化しています!−デザイン編−
スタッフブログ
麻尾悠平 麻尾悠平
2015/11/06

【iichiのウラ側】スマホサイトも日々進化しています!−デザイン編−

4c86d96fb2e261798f906538bde9ad7f

こんにちは。iichiでフロントエンドエンジニアをしている麻尾です。
私はiichiWEBサイトの皆様が目に触れるところの設計と実装をしています。

例えば今ご覧になっているこのブログ。
文字サイズや行間を読みやすく調整したり、他の記事にスムーズにたどり着けるようにリンクを配置したりといったことをしています。文字が小さすぎたり行間が詰まっていたりして読みにくかったり、目的のページに辿り着けなかった時ってとてもストレスを感じますよね。
ブログであれば「ブログの文章を伝える」というのがページの目的ですが、悪いデザインや設計では達成する前に離脱してしまいます。
その目的をストレスなく遂行できるようにする、そしてちょっとだけiichiらしいエッセンスを加えるのが私の仕事です。

日々、ユーザーの方が気づかないレベルの、でも使いやすくなるような改善を進めています。
今日はその裏側を紹介したいと思います。

事例:スマートフォンサイトのショップページ

先日、iichiスマートフォンサイトのショップページ改善をしました。 
改善前・改善後の比較がこちらです。↓↓↓

oldnew-arrow


見た目はこんな風に変化しました。では、どのようなプロセスでこのように変わったのか、少し解説させてください。

【ここを直したいポイントその1】固有のショップ感がない!

旧ページではショップ固有の情報がプロフィール画像作家名だけでした。作家名は文字情報だけなのでパッと見だとどのショップも同じに見えてしまい、事務的な印象になってしまいます。

old_text1

※あの画像とは!?
PC版のプロフィールページに表示される自己紹介画像のこと。この画像はショップ側で任意に設定できるが、スペースの都合上スマホサイトでは表示させていなかったのです。pc



【ここを直したいポイントその2】ボタンがごちゃごちゃしている!

旧デザインは近いエリアにボタンが漫然と置かれていました。

old_text-2
【ボタン整理後】
old_text2

上記のような考察と改修の末、リリースされたのがこちら


new_text
こんなことを考えて作りました
  • 固有のショップ感を出すために入れたかった自己紹介画像はどうしてもスペースを取ってしまうため背景画像として使用しました。文字要素が載るのでぼかしをかけています。
  • プロフィール画像は旧verより大きくしました。メッセージを送るボタンを背景画像エリアに載せることで「このショップにメッセージを送る感」がより強くなったと思います。
  • リンクボタンはタブデザインにしました。現状開いているページ、並列のページがより分かりやすくなりました。
  • ソートボタンはプルダウン式に。押せることが分かりやすく、さらにグループ絞り込みもできるようになっています。


もう一度並べてみるとこんな感じです。


oldnew

まとめ

いかがでしたでしょうか。大きく改善されたように見えるかと思います。
ですが、これでこのページの改善が終了というわけではありません。今回見えてこなかった問題点は必ずありますし、機能追加や他の改善との整合性の問題、デザインのトレンドなど、その時々によって状況は変化します。
(また、見た目は同じまま、裏側のコードをより簡潔に書く、という改善もあります。そのあたりは別の機会に技術ブログでご紹介します。)

今後もさらなる高みを目指し、改善の日々は続きます。より良い体験をご提供できるよう精進して参ります。ここまで読んでくださりありがとうございました。

このエントリーをはてなブックマークに追加

スタッフブログの最新記事

  1. スタッフブログ

    【iichi探検隊】ものづくりの現場・工房見学編 〜リン版画工房〜

  2. スタッフブログ

    ありがとうを伝える手仕事の贈りもの ~母の日ギフトおすすめ16選~

  3. iichiガイド / スタッフブログ

    魅力的なショップづくりのポイント〜アイドマの法則〜

  4. iichiニュース / スタッフブログ

    Pinkoiとの資本業務提携について【代表ブログ】

このカテゴリーの記事一覧へ

おすすめの記事

  1. iichiガイド

    プロフィールを書く時の4つのコツ

  2. iichiガイド

    【その4】写真の撮り方教室[作品への光の当て方]

  3. iichiニュース / スタッフブログ

    Pinkoiとの資本業務提携について【代表ブログ】

  4. iichiガイド / スタッフブログ

    魅力的なショップづくりのポイント〜アイドマの法則〜

このページのTOPへ

パスワードを忘れた方はこちら

ログインできない場合はこちら

携帯のメールアドレスにて登録される場合は、
ドメイン iichi.com より受信できるよう、
メール設定の見直しをお願いします。ドメイン指定受信について
iichiの利用規約およびプライバシーポリシーをお読みいただき、
同意される方のみ「同意して会員登録する」ボタンを押してください。