2018年のアプリデザインを予測！知っておきたいトレンド7選｜はんざわさき
2016年からアプリやwebデザインは完全なフラットデザインではなく、やや立体感のあるデザインが主流になりました。 引き続き2017年もその傾向はありましたが、徐々に進化を遂げています。 今回は、去年の傾向から「2018年のアプリデザイントレンド」を予測してみました。 ディフューズシャドウ2016年から根強い人気のディフューズシャドウ（Diffuse Shadow）は、2018年も多くのアプリで見かけそうです。 ディフューズシャドウは目立って欲しい重要なボタンや、入力フォームに良く使用されています。 Apple Musicのように「再生中」と「停止中」などの状態を表す場合に使われるパターンもありました。 また、背景とカードを白色にし、ディフューズシャドウのみで境界線を表現しているデザインをDribbbleで良く見かけます。 カードを囲う線や色数が少ないため、すっきりとしたデザインになってい
ナビゲーション/メニューのiPhoneアプリデザイン集22選
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
「えきねっと」の衝撃！ 最悪のユーザビリティーを放置するＪＲ東日本の体質 : 筆Blog
Penです。 数年ほど前に、えきねっとに起因するトラブルで、JRから1万円ほどだまし取られました。 新横浜発の新幹線のチケットを「えきねっと」を利用して購入しました。 当日の朝、出発の30分ほど前に横浜駅に到着したのですが、肝心のチケットの受け取り場所（キオスク端末）がみつからず、JR東海の窓口に並んで確認をこころみるも、長蛇の列で30分を空費したあげく、発車時間になったためとりあえず乗車券を購入して､新幹線に飛び乗りました。 （横浜駅新横浜駅はＪＲ東海の縄張りらしく、ＪＲ東日本の端末はよくわからない場所にひっそりと設置されています） とりあえず目的地で下車したのちに、窓口で事情を話したところ、ＪＲ東海の職員はＪＲ東日本が運営する「えきねっと」のことはわからないらしく、5分くらいマニュアルと格闘したのちに「えきねっとのチケットは発券していないので、クレジットカードに請求されません。」と断言
ちょっくらKAYACにフロントエンジのお話聞きに行ってきた。 - hiromitsuuuuu.log();
今日はKAYACの恵比寿支社に『第1回 クライアントワークチーム勉強会 「フロントエンジニア主導のwebキャンペーン」』というのを聞きにちょっくら恵比寿まで行ってきました。女の人は片手で数えるくらいしか来てなかった。フロントエンジニアはやっぱり男の人が多いのかしら。 会場はKAYACの入っているビルのB1、「ART-Meter」の事務所兼倉庫な場所。クライアントワークということで、フロントエンジニアの事例が主。性質上、事例なんかは書けませんが、やはりiPadで見たいというクライアントからの要望があるようで、元々FLashだったのもをHTML5で作ってくださいという仕事が多いような気がしました。今日聞いた話で個人的に気になった言葉なんかをピックアップ。だらだら書いたメモは後日Fbにでも。 まずは比留間さんのセッション「これからのMEのあり方。JS活用入門」より。 ●これからのMEはどうあるべ
スマホのUI考２ 〜 フィードバックについて | fladdict
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
使いやすいマルチプルセレクトへの道のり（セレクトボックスとチェックボックスについて） :: 5509
jQselectableの拡張で、しっくりきて使いやすい、控えめなマルチプルセレクト（複数選択可能なセレクトボックス）を模索中、、つまり考察だけだす おさらい ※ 仕様ではなくて、認識です セレクトボックス 一覧の中からひとつを選択させるもの（そもそも） チェックボックス 基本的には一覧である必要はなくて、複数ある項目の中から指定する項目を選択させるというもの セレクトボックスのmultiple属性 どちらもそもそもの使い方が全然違うけど、セレクトボックスにはmultiple属性があって、trueにすると（multiple属性を追加するだけやけど）、PCではShiftかCtrl(Cmd)を押しながらクリックすると複数項目が選択できる ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS この「ShiftかCtrl(Cm
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
タブ使用時の注意点 (ユーザビリティ実践メモ)
タブによる表示切り替えは、様々なサイトで利用されている便利な機能です。さて、皆さんはタブの使い方が大きく2種類あることにお気づきでしょうか？ タブは便利であると同時に、背後のタブが見られない危険性が伴います。今回は、タブの2種類の使い方にそって、タブ利用時の注意点について考えてみたいと思います。なお、どちらの使い方か明確に分けられない場合は、両方の注意点を参考にするのがおすすめです。 ※タブを利用する際の注意点は過去の実践メモでも取り上げています。 （参考） 「困った時のタブ頼み」（ユーザビリティ実践メモ） まず、一つ目の使い方は、「多数の情報をカテゴリごとに整理して提示する」というものです。 例えば、ニュースサイトでは多数のニュース記事を「総合」「経済」「エンタメ」「スポーツ」というタブを使って分かり易く分類しているのをよく見かけます（図1）。あるいは、衣料品を扱うＥＣサイトでは「レディ
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
Pttrns — Mobile User Interface Patterns
Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save
はやぶさの非常ボタン糞すぎわろたｗｗｗｗ : ブログ太郎
2011年03月06日 はやぶさの非常ボタン糞すぎわろたｗｗｗｗ ニュー速VIP 1 ：以下、名無しにかわりましてVIPがお送りします：2011/03/05(土) 21:23:59.27 ID:MNvNzZBu0 「はやぶさ」緊急停止 子供が非常通報装置押す http://sankei.jp.msn.com/life/news/110305/trd11030513040013-n1.htm 18 ：以下、名無しにかわりましてVIPがお送りします：2011/03/05(土) 21:27:17.08 ID:4M43aeaeO これは押す 10 ：以下、名無しにかわりましてVIPがお送りします：2011/03/05(土) 21:26:05.91 ID:EeaPPR2h0 ガキじゃなくても間違えそうだなｗｗｗ 12 ：以下、名無しにかわりましてVIPがお送りします：2011/03/05(土) 21
Android開発者が知るべき10のこと - Tech Booster
本記事はAndroid DevelopersのDesigning for Seamlessnessを意訳、加筆したものです。Androidアプリをシームレスに連携させるためのノウハウを紹介します。 特性を理解する アプリケーションが高速に動作し、レスポンスが良くても、アプリケーション遷移やダイアログ表示を乱用した無計画なUI、不用意なデータの喪失、意図しないタイミングでの操作妨害など知らず知らずのうちにUXの良くない設計になっているかもしれません。これらの問題はどのように避ければ良いでしょう？ アプリケーションが動作するコンテキスト Androidフレームワークの特性(アプリケーションへどんな影響を与えるか) を理解することが開発の手助けになります。 ユーザ操作を妨げない ユーザ操作のシームレス性で問題になるケースとしてよくあるのが、他のアクティブなアプリケーションを無視して、自分のダイア
効果的にコンテンツを配置する代表的な3つのレイアウトとは
ウェブデザインでもよく使用される、ユーザーの視線の動きを予測し、効果的にコンテンツを配置する代表的な3つのレイアウト、グーテンベルグ ダイアグラム、Zパターン、Fパターンを紹介します。 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 グーテンベルグ ダイアグラム Zパターン レイアウト Fパターン レイアウト Pattern of Focal Points -情報の階層化 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムとは、均等に配置された同種の情報を見るときの視線の動きを一般的なパターンにしたものです。 これは特に、テキストの比重が高いコンテンツにはまります。 グーテンベルグ ダイアグラム グーテンベルグ ダイアグラムは4つの象
Android Interaction Design Patterns |
Add a pattern! Missing a pattern? We invite you to add your patterns. Read more This is androidpatterns.com, a set of interaction patterns that can help you design Android apps. An interaction pattern is a short hand summary of a design solution that has proven to work more than once. Please be inspired: use them as a guide, not as a law.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社VOYAGE GROUP
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android