goo辞書

goo Wikipedia

NTT Resonant

goo辞書、goo Wikipediaのスマートフォン用サイトのUI改善を行いました。
辞書や辞典としてスマホでの検索のしやすさ、使いやすさ、見やすさをよりよくするため、
弊社でUIの改善提案を行い、UI設計・デザイン・フロントエンド実装を担当しました。

DATE

August 2016

CLIENT

NTT Resonant

goo辞書

スマホ版の使い勝手を良くしたいという要望に対し
以下のUI改善を提案させていただきアップデートを行いました。

- ヘッダUIの刷新 -
辞書の種類をタブ選択できるよう変更
縦長のページでもすぐ再検索できるよう、検索窓を下フリックで表示
検索窓タップでサジェスト及び検索方法が選択できるレイアウト表示

- 英和辞典のレイアウト刷新 -
汎用的な単語だとページが縦に長くなりすぎるので、階層を整理
同スペルで意味の違う単語をアコーディオンで開閉できるように
例文が3つ以上ある場合デフォルト表示数を少なくしmoreボタンを設置
見出しと本文のメリハリやマージン等、レイアウトを調整

https://dictionary.goo.ne.jp/

goo Wikipedia

goo辞書と同様の流れで、以下の点を改修しました。

- ヘッダのUI改善 -
無駄な機能を削りシンプルなデザインへ
検索窓を虫眼鏡アイコンで開閉するよう変更

- 記事レイアウト調整 -
多岐に渡るWikipediaの見出しの階層の仕様を調査し整理
記事のフォントサイズ・カラーやマージン、デザインを調整
大項目をアコーディオン化

https://wpedia.goo.ne.jp/

CREDIT

Produce : Hiroshi Kamasawa
Direction : Keiichiro Nakano
Development : Hajime Kobayashi

TAG

TOP

>

PROJECTS

>

goo辞書 / goo Wikipedia