2020/6/11 サイト公開しました！
下記よりご覧いただけます。
Enchant Search DataBase（ESDB）
タイトル通り、デザインモックアップ作成が完了しました！
実はエンチャント検索サイトのPCスマホ版のデザイン案作成が全部完了しちゃいました。ブログ書くほうが時間かかるわ
— kuma (@jackumagic) May 14, 2020
作業完了はしましたが、開発していく中で使いやすく変更を加えたりします。
今回は完成したデザインモックアップを
私がどのような意図で作成したかという点についてお伝えしたいと思います。
進捗状況
一工程完了し、トータル進捗率は日数ベースで12.5%と言ったところでしょうか。
現在は作成したデザインモックアップを元にデザインの設計をしております。
設計ってなんだ？と思われた方はこちらからどうぞ！
それでは、イメージをお見せしていきます！
検索トップ
サイトの顔となるトップ画面のデザインです。
背景透けさせた方がエロいので、最終調整した結果こんな感じ pic.twitter.com/bhhD7jDA9i
— kuma (@jackumagic) May 15, 2020
最終的なデザインはこのような形になりました！
ではなぜこのようなデザインになったか解説します。
えろいってなんかそういうサイトなの・・・？
お願いだからそこ引っかからないで笑
パソコン版
よくある構成じゃないかなと思います。
当初から「比較的モダンなデザインでライトユーザーでも分かりやすい」を目指していました。
モダン感を前面に出すべく、ダークテーマのようなデザインにしました。
「ライトユーザーでも分かりやすい」を実現するために、
どこでもよく見る一般的な構成であるということはかなり意識しています。
またデザイン面では、
- マビノギ公式の壁紙を背景画像に使用する
- アクセントカラーをマビノギの魔法スキルの色にする
などでマビノギのエンチャント検索サイトですよーという感じを演出しています。
特に肝なのが、虫メガネマークがついている検索ボタンです。
この検索エリアでは、様々な検索方法に対応させたいと思ってます。
例えば、
- エンチャント名
- エンチャント効果
- 出現場所…etc
まだ詳細に詰めてはいませんが、「聞いたことのある単語をなんとなく打ち込めば簡単に検索ができる」という機能を実現目指しています。
いい感じのエンチャントを探して！
無理。
スマートフォン版
現代ではスマホ対応が必須と私は考えています。
実際スマホ対応できていないサイトは、スマホからのGoogle検索で優先順位が落ちてしまいます。
モニター2枚ないとマビノギ中の画面切替面倒ですよね
スマホで簡単に検索出来れば上記のような面倒ごとを解決できるのではという思いもあり、スマホ版はかなり大事にしています。
前置き長くなりましたが、以下のようなデザインになっています。
スマホ版の基本的な考え方は「よく使われる機能を最小限の見え方で提供する」です。
狭い画面でどうすれば使いやすいかを考えてます。
また、スマホだと上から下に視線が動く傾向があります。（PCだとZのような目線の動き）
目線の動きも意識してなるべく上から下に流し見できるデザインにしています。
スマホ版はまだ詰められるのでは？と考えているのでアイデアが出たらどんどん変更を加えていく予定です。
検索結果画面
トップで検索した結果を一覧に表示する画面です。
継続利用されるかどうかはこの画面の使いやすさ次第かなと思っています。
パソコン版
値を表示する考え方は
様から拝借しました。
私も1ユーザとしてこの機能は非常にお世話になっていたので、この機能なしで作ることは考えられません。
値だけでなく、全体的に色濃く影響受けてるかなと思っています。
私も1ミレシアンですからね！
他にも以下機能があります。
- moreをクリックするとすべての条件を表示
- 吹き出し表示で成功率を表示
吹き出しイメージはこんな感じ。
この辺はプラグインを使って実装しようかなぁと思ってます。
ちなみに名称のリンクは次章の検索結果詳細画面へ移動するイメージです。
どうでもいいけれど、好きなエンチャの傾向がばれますねこれ・・・
スマートフォン版
色々検討しましたが、ボタンっぽい一覧を配置するのがベストかなぁという結論に至りました。
スマホ版は最後の最後まで要調整かなと思ってます。
何を表示して何を表示しないかの取捨選択が難しい・・・
検索結果詳細画面
このページはほぼスマホ版のために作ったようなページです。
1エンチャントの情報に絞って情報を表示するページになってます。
パソコン版
PC版だと一覧の情報がそのまま表示される形になってしまうので、PC版では不要じゃね・・・？
とは思ってます。
じゃあわざわざPC版で出さなくてもよくね？
消すのも面倒だし、あっても困らないからそのままにさせてください・・・
スマートフォン版
打って変わってスマホ版には絶対必要なページだと思ってます。
このページがないとスマホで全情報にアクセスできませんからね・・・
またランクのリンクもスマホ版は検索一覧画面ではタップし辛いので、
検索結果詳細画面のみでしかタップできないようになっています。
スマホ版だと成功率表示はこんなイメージです。
よく使われるのは上記3つの粉かなーと思うので思い切って情報を絞ってみました。
まとめ
今回は主要ページの詳細をまとめて紹介してみました。
マビノギユーザの皆様に使いやすいデザインになってればいいなと思います。
今回紹介していなかったヘッダーのハンバーガーメニュー（左端）とヘッダーの右端を推したときのイメージは以下の記事で紹介しています。
