2021年Design Switch記事〜総まとめ編〜
皆さん、こんにちは！Design Switchです。今年も残すところあと数日となりましたね👀 皆さんは大晦日に何をする予定ですか？
さて、今回は2021年Design Switch記事〜総まとめ編〜をビュー数やいいね数の多い記事TOP5順にご紹介をしたいと思います✊ランキング上位にはやはりUIデザインに特化した記事が多い傾向にあります。まだご覧になっていない方も今年のうちに読破してしまいましょう😎
ランキングTOP5🌟
TOP5の記事ではUI要素やデザイナーが使用するツールやサイトについての記事が多くランクインしました。1年を通して見てみると、やはりUIデザイナーにとっての基礎となるナレッジが需要の高い傾向にあると感じました。
さっそく各記事のサマリーをご紹介していきます。
Rank5🌟
UIデザインに欠かせないデザインエレメントの話
2021年3月10日 view：382 / いいね：7
https://note.com/designswitch/n/n77a46116b964
デザインエレメントは主に7種
◆ Line (線) 2つ以上の点の間をつないだ領域のこと
◆ Color (色) 色相、彩度、明度という三つの属性を持つ
◆ Object (形) 線や塗りで形成された領域
◆ Texture (テクスチャー) 材質がもつ、視覚的・触覚的な質感
◆ Space (スペース) 2D Space（二次元空間）と3D Space（三次元空間）
◆ Form (フォーム) 「幅」「奥行き」「高さ」を持っている三次元のオブジェクト
◆ Typography (タイポグラフィー) 字体のことだけではなく文字の体裁全般の事
Rank4🌟
UIデザイナーに覚えてほしいUI要素 後編
2021年6月11日 view：383 / いいね：13
https://note.com/designswitch/n/n8410d16a61af
◆ 選択ボタン
🔳 使い分けに注意なUI要素
・トグルボタンはユーザーが選択した瞬間にフィードバックが返されON / OFFの状態が選択できる
・ラジオボタンは選択肢が1つの場合に使われ、1つの選択項目は常に選択されている状態になる
・チェックボックスボタンは複数の選択肢の中から0以上の項目を選択 / 未選択 / 不確定状態に選択できる
◆ ウィンドウ関連
🔳 ダイアログの重要なポイント
・ダイアログは画面中央や上や下に四角のウィンドウが表示される形態が一般的
・システム側の都合やユーザの操作を伺う、ユーザの操作に対する結果を伝えるなどで使用される
・モードレス (ダイアログ以外の操作を受け付ける)な状態で表示させるのが理想
◆ その他の頻出UI
UI要素によって、入力前、入力中、入力後、非活性 (操作不可)、マウスホバー時、押下時などの状態があるためそれぞれのステータスに応じてビジュアルを検討する
Rank3🌟
UIデザイナーの成長を助けてくれるサービスサイトのまとめ
2021年7月16日 view：437 / いいね：23
記事URL：https://note.com/designswitch/n/n32c1cb5d91ea
🔳 お題を提供してくれるサービス
◆ Cocoda
UIデザイナー初心者の人たちのために作られたUIデザインを勉強できるサービスサイト
◆ Daily UI
平日毎日お題を送ってくれる海外のサービスで、少し上級者向けのお題配信サービス
🔳 参考のデザインを探せるサービス
◆ Behance
Adobeが運営しているポートフォリオ型のSNSでプロのクリエイターが多く作品を展示している
◆ awwwards
Awwwardとは毎日世界中のデザインを表彰しているサイトで、3大アワードの一つ
🔳 その他 GoogleChromeの拡張機能
◆ usepanda
デザインに関する情報を一元管理することができるGoogle Chromeの拡張機能
Rank2🌟
UIデザイン実務でFigJamを使ってみた
2021年8月27日 view：524 / いいね：18
記事URL：https://note.com/designswitch/n/nf068a0743613
◆ FigJam上でできるUIフロー
・デザインテイストの洗い出しと選定
・遷移図の作成
・Lo-fiからMid-fiレベルのワイヤーフレームの作成
◆ 実際に使ってみて
・ワイヤーフレームや遷移図のUI設計の利便性は高そう！
・とにかく使いやすい！ショートカットもFigmaと同じなので、普段からFigmaを使っている方なら格別に使いやすい！
・Figma↔︎FigJamの互換性も高くサクサク操作できる！
・かわいいステッカーで楽しい気分になる！
Rank1 🎉
UIデザイナーに覚えてほしいUI要素 前編
2021年6月4日 view：656 / いいね：23
https://note.com/designswitch/n/n2661c1f62b1e
◆ UI要素とは
UI要素とは、webサイトやアプリなどのインターフェース上の全ての要素を指します。（ウィンドウ / ハンバーガーメニュー / テキストフィールド / セレクトボックスなど）
◆ ナビゲーション・メニュー表示
・ハンバーガーメニュー / ドロワーメニュー
3本線のアイコンで表現されるメニューアイコンを使用し、選択すると他画面に遷移するメニュー項目が表示される。アイコンの意味がわかりにくいというデメリットはあるが複数のメニュー項目を収納できる。
・タブ
物理世界の本の目録を示すつまみのように表現されたUI要素で、UI上では複数のメニューを切り替えて表示する時に使用される。どの画面を表示しているか一目で判断できるが、メニュー項目数が多いと対応できない。
・タブバー
タブを横一列で配置したUI要素。常時ヘッダーかフッター位置に固定表示され4~5個、メニューを表示することができる。
・フリックスクロールナビゲーション
タブの概念を取り入れた、画面横にスクロールしアイコンやタブを切り替え他ページへ遷移可能なUI要素。複数のメニューをユーザーに提示する時に最適。
・ドロップダウンメニュー（プルダウンメニュー）
クリックやホバーによって選択できるメニューが下へ表示されるUI要素。サイドメニューのカテゴリー分けや機能のメニューを表示する場合に使用される。
・スプリングボード
主要アプリや機能をアイコンと文字で構成しグリッド配置させたUI要素。
◆ 表示 / 非表示
・カルーセル
横フリック操作で情報を順番に表示させるUI要素。主にサービス上で販売されている商品画像の紹介や、サムネ付きのニュースなどを紹介する時に使用される。
・アコーディオン
カテゴリやコンテンツなどを開閉できるUI要素。情報はコンパクトにまとめられる一方で、開かないとわからないというデメリットもある。
◆ 状態通知
・ステップバー（ プログレストラッカー / プログレスインジケーター )
現在の進捗状態を示すUI要素。ユーザーのタスクの完了項目や進捗度合いを示し、一目で全てのタスクが把握できる利点がある。
◆ 選択ボタン
・ラジオボタン
複数の選択肢がある内の1つを活性状態にする場合に使用されるUI要素。
・チェックボックス
複数の選択肢の中から複数の項目を選択する場合に用いられるUI要素。
個人的オススメ記事 👀
次に今年の記事中でいいね数が多く、デザイナーとしてオススメの記事をご紹介します！UIデザイナーはデザインに限らず様々なフェーズに関わることが多いためUXよりの知識や経験も大切なものとなってきます。
オススメ1🍎
HCDプロセスとは何か？
2021年3月26日 view：125 / いいね：23
https://note.com/designswitch/n/n3e5975ef515a
HCDプロセスとは
🔳 UXデザインを実践するためのプロセス
🔳 常にユーザー視点で設計や体験がうまくできているかを細かく評価するプロセス
UXデザインとのHCDプロセスの関連性
🔳 HCDプロセスは、UXデザインを実践するためのプロセスとして活用される
オススメ2🍎
サービスがUIに落とし込まれるまで ~上流工程編~
2021年2月21日 view：150 / いいね：13
https://note.com/designswitch/n/n7368e7492e7e
🔳 「戦略」段階では
◆ 自分達(クライアント)が作ったサービスや製品の目的を明らかにする
◆ ユーザのニーズを明らかにする
🔳 「要件」段階では
ユーザのニーズや課題を達成解決するために必要な機能を決定し、サブ機能の洗い出しやUIに必要な機能の洗い出しの詳細化を行う。
🔳 「構造」段階では
要件で決定した機能を分類整理をした上で優先順位化し大枠となる構造を決定していく。
皆さんまとめのサマリーはいかがでしたでしょうか？今年からDesign Switchはスタートし、日に日に読者が増える実感が嬉しかったです。沢山の記事をあげることができ、様々なナレッジ記事を読んでいただけたことありがとうございます😎
引き続き来年もデザインやARCHECOについての記事をデザイナーチーム一丸となって発信していくので、温かく見守って頂けると嬉しいです。今年もありがとうございました！！皆さんも良いお年をお過ごしください 🙇♂️
🌟 現在ARCHECOではUIデザイナーを募集しています。ご興味のある方は是非こちらからご応募ください！お待ちしております。
🌟 Design Switch (デザインスイッチ)を運営している UX/UIデザイン会社 ARCHECO (アルチェコ)について
この記事が気に入ったらサポートをしてみませんか？