BLOG



mobileui_0500.png

こんにちは。飯山です。
5回に渡ってお届けしているシナップデザイナーチーム発表からの「パーツごとに見るモバイルUI」シリーズ記事、最後の第5回は「参考にしたいUIまとめ」です。 スマートフォンをはじめとしたタッチデバイスならではのUI表現として、ユニークであったり、機能的であったりと、シーンに応じて参考にしたいモバイルUIをピックアップしてご紹介します。

第1回:「ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介」富川
第2回:「ハンバーガーメニューを押した際のナビゲーションの表現方法」沓掛
第3回:「カルーセルの事例と、設計・デザイン時に気をつけること」小茅
第4回:「フォームの事例と、UIを考えるときのポイント」久保田
第5回:「参考にしたいUIまとめ」飯山

mobileui_04-00.jpg

こんにちは、久保田です。
シリーズでお伝えしてきたパーツごとに見るモバイルUIも第4回目となりました。今回は「フォーム」についてお伝えします。
ユーザーが自ら操作せねばならないフォームは、入力するのは面倒なことで不自由に感じられることもあり、負担に思われがちです。そのうえ会員登録となると個人情報を入力せねばならず、躊躇する人もいるのではないでしょうか。それでもサービスを利用するために入力する必要があり、運営側からしても登録して欲しいものです。
そんなフォームがどのようなUIであれば適切なのか、事例を挙げながらご紹介していきます。

SINAP Journal 2017 summer photo

ダウンロード(4.7MB):SINAPJournal_2017s.pdf

こんにちは。シナップ大川です。

クライアント、パートナーのみなさまにはお手元に届いているころかと思います。毎回ご好評いただいておりますシナップの活動報告も兼ねた不定期冊子『SINAP Journal』の最新号『SINAP Journal 2017 Summer』を作成しました。

mobileui_03-title.jpg

こんにちは、小茅です。
私のモバイルUIのテーマは、サイトでよく使われているUIのひとつ「カルーセル」です。
よく見かけるのは、ページ上部にあるフィーチャー画像エリア。その他、商品一覧にも多く使われています。Googleの検索結果にカルーセル形式で表示されるAMP(Accelerated Mobile Pages)もそのひとつです。

最近では、文字主体のカテゴリメニューや商品キーワードなどが左右にスライドして、エリアを有効活用した例も出てきています。 (従来のカルーセルとは少し違った機能の部分も。)

第1回:「ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介」富川
第2回:「ハンバーガーメニューを押した際のナビゲーションの表現方法」沓掛
第3回:「カルーセルの事例と、設計・デザイン時に気をつけること」小茅
第4回:「フォームの事例と、UIを考えるときのポイント」久保田
第5回:「参考にしたいUIまとめ」飯山

今回の発表では、簡単なカルーセルの紹介と事例をまじえてご紹介しました。

また、カルーセルを導入することでサイトに良い効果があるのか、設計・デザインする前には何を気をつけたらいいか、実装に依頼する時などの注意点もあわせてまとめてみました。

201707mobileui_0200.png こんにちはデザイナーの沓掛です。

前回の記事では全部で5回に渡ってお届けする「パーツごとに見るモバイルUI」シリーズの第1回目をご紹介しました。今回も引き続きシリーズの第2回目をご紹介します。

第1回:「ハンバーガーメニュー以外の特徴的なメニュー表現の事例紹介」富川
第2回:「ハンバーガーメニューを押した際のナビゲーションの表現方法」沓掛
第3回:「カルーセルの事例と、設計・デザイン時に気をつけること」小茅
第4回:「フォームの事例と、UIを考えるときのポイント」久保田
第5回:「参考にしたいUIまとめ」飯山