2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道 | CAREER HACK
デザインにおいて全くの素人だった大学生が、ひたむきな自主学習で一躍、時の人に。春田雅貴さん（23）は、他社サービスのデザインを完コピ。自ら分析・発信し、話題となった。なぜ彼は泥臭い努力を？ そこにあったのは「社会とつながりたい」という強い意志だった。 なぜ、デザインの素人だった大学生が注目された？ デザイン界で、ちょっと名の知れた大学生インターンがいる。 それが春田雅貴さん（23）さんだ。彼は横浜国立大学・経営学部の大学4年生（2018年1月現在）。クラウド会計ソフトのfreee社でインターンのデザイナーとして働く。じつはつい１年前までデザインに関してまったく素人だった。 彼を有名にしたのが「UIトレース」という取り組み。 他社のWebサイト、ランディングページ（LP）、プロダクトにおけるUIをゼロから模倣（模写といってもいい？）。そのポイントをtwitterや、ブログで発信していったのだ
デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック
文字をぴったり揃えたのにしっくりこない、正方形なのに長方形に見えてしまう、シャドウを与えていないのにぼんやりとシャドウが見える、ボーダーを加えただけなのに塗りも変わったように見える、そんな経験はありませんか？ WebサイトのUI、アイコン、ロゴ、イラストなどでデザインしている時に誰しも経験したことがあると思います。これらの原因は目の錯覚によるもので、その仕組みを理解することで困惑されることなく、効果的に利用することもできます。 11 Optical Illusions Found in Visual Design by Balraj Chana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 三角形の交点による錯覚 垂直の水平方向による錯覚 明度による錯覚 奥行きによる錯覚 格子による錯覚 コントラストによる錯覚 カラーによる錯
iPhoneの変化に合わせて生まれたUIトレンド【デザイナーの方々、見逃していませんか？】
最近のモバイルUIにはとあるトレンドが見られます。重要な要素が画面の下側に配置されるようになってきているのです。iOS 10で変更されたアップルの地図アプリを見れば一目瞭然です。 この変更には明確な理由があります。それはスマートフォンがどんどん大きくなる一方で、私たちの手の大きさが変わらないためです。 初期のiPhoneでは親指で画面左上の戻るボタンをタップすることができました。しかしPlusモデルでは画面が大型になり、同じ操作をすることがほぼ不可能となっています。 この問題に対処するため、画面の端からスワイプすることで前の画面に戻る機能が搭載されました。ただしこの操作は画面を見ただけでは発見できず、新機能に敏感なユーザーにしか届きません。 そのため、重要な要素を画面下部に配置するという親指にやさしいトレンドが生まれたのです。Windows Phoneのブラウザもアドレスバーは画面下部にあ
2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。多くのトレンドは検討する価値がもちろんありますが、一緒に新しい技術も必要となります。 優れたUIデザインは、シンプルさ（英: Simplicity）と有効性（英: Effectiveness）が全てです。これこそがデザイナーが機能性を達成しようとする理由です。しかし反対に、もしユーザーがアプリをうまく使いこなせないとき、UIデザインは失敗と言えるでしょう。 デザイントレンドが変化する理由にはさまざまな要因が考えられます。たとえば2015年の大きな流れとして、ハードウェアの変化やモバイル端末のレスポンシブ化が挙げられます。 公開された多くのモバイルアプリは、人気のある機能を必需品としてすぐに変化させてきました。さらに今では若者のおよそ90%が、モバイル端末上で基本的な操作を行
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
モバイルアプリのUIデザインの参考になるスライド10選
レストランやカフェ、レシピサイトから素敵なデザインのUIエレメントのまとめ