【2024年下半期】すべての人に向けてデザイナーが分かりやすく解説!すぐに業務に活かせるUI/UXデザイン記事まとめ

アイスリーデザインのデザイナーが、日々の業務やクライアントワークで身に付けたUI/UXデザインに関する知識を、この半年間in-Pocketで定期的に発信してきました。

年末の総集編として、今回はそれぞれの記事がどんなシーンで役立つかという観点でまとめていきたいと思います。

すべての方にとって分かりやすい記事をまとめていますが、レベル別にデザイン周りの知見を深めたい方(デザイナーではない方)向け、デザイナー向けで分類しました。

デザイナー向けの記事は、デザイナーではない方にとっては少し難しい内容かもしれませんが、知っておいて損はない、一段レベルアップできるような内容になっております。気になったものがあればぜひ記事を読んでみてください!

デザイン周りの知見を深めたい方におすすめの記事

プロダクト開発やサービス開発に携わっていたり、Webサイトの運用をしていたりで、「デザイン周りの知見を深めたい。でも、専門的な話は難しいから分かりやすく解説してほしい」と感じている方も多いのではないでしょうか?

そんな方に向けて、in-Pocketでは専門的な目線でありつつ、非デザイナーの方も理解しやすい記事を積極的に発信しています。もちろんデザイナーの方にも参考にしていただける記事になっております!

知っておきたい!間違えやすいデザイン用語の使い分け5選

デザイン用語って似たような言い回しのものも多く、混乱してしまいますよね。
デザイナーとの会話で出てきたデザイン用語を、あいまいな理解のまま受け流してしまっていませんか?

この記事を読めば、以下の間違えやすい単語をしっかりと理解し、使い分けができるようになるはずです!

  • UIデザイン / UXデザイン
  • ユーザビリティ / アクセシビリティ
  • ユーザーテスト / ユーザビリティテスト
  • ユースケース / ユーザーストーリー
  • プロトタイプ / プロトタイプ思考

 

それぞれの単語の細かいニュアンスの違いまで解説しておりますので、デザインを学び始めの初心者にもおすすめです。

知っておきたい!間違えやすいデザイン用語の使い分け5選

 

ネイティブアプリとWebアプリの違いは?UI/UX観点で解説

アプリを開発する際、ネイティブアプリにするか、Webアプリにするかで迷う方も多いと思います。「デバイスへのインストールが必要かどうか」という点以外にも、実は多くの違いがあるんです。

アプリ開発において、どちらを選択すればいいのかをUI/UXの観点から6つの要素で比較・解説しています。実際に開発しようとしているサービスにあてはめて考えてみると、具体的に検討しやすくなるのではないでしょうか。

サービスやユーザーの特性を考慮し、より最適なアプリの提供方法を選択しましょう!

ネイティブアプリとWebアプリの違いは?UI/UX観点で解説

 

最小限の機能で最大の価値を生み出す:MVP開発でのプロトタイプ作成のポイント

新規事業において、仮説検証のために最小限の機能を持った初期バージョンの製品であるMVPを開発する手法はよく使われます。プロトタイプとは、MVP開発の検証プロセスで作成される試作ツールのことです。

必要最小限の機能でありながらも、きちんと仮説検証を行うためには、いくつかのポイントを押さえる必要があります。

この記事では、プロトタイプの種類別の役割や、プロトタイプ作成の3つのステップ、プロトタイプをデザインする際のポイントを解説しています。

プロトタイプは作ったものの、それをMVPにどう活かせばいいのかわからないという新規事業担当者や初めてプロトタイプを作成するデザイナーにおすすめの記事です!

最小限の機能で最大の価値を生み出す:MVP開発でのプロトタイプ作成のポイント

 

プロダクト開発の効率と一貫性を高める!デザインシステムの導入ステップと成功のポイント


デザインシステムは、デザインと開発の効率を大きく向上させるための重要なフレームワークですが、その導入と運用には一定の知識が必要です。

アイスリーデザインでは、これまでさまざまな企業のデザインシステム導入・運用支援をしてきました。この記事ではその経験をもとに、デザインシステム導入のメリットや9ステップの具体的な構築方法とつまずきやすいポイントをまとめ、デザインシステムの実践的な導入ステップを解説しています。

自社のプロダクト開発を効率化するためにデザインシステムの導入を検討している方にぜひ読んでいただきたい記事です。

プロダクト開発の効率と一貫性を高める!デザインシステムの導入ステップと成功のポイント

 

ウェブアクセシビリティの無料チェックツール7選と活用ステップ【デザイナーおすすめ】

2024年4月に施行された改正障害者差別解消法により、民間事業者にも障害者への「合理的配慮の提供」が義務化されました。その中でウェブアクセシビリティは、「環境の整備」に該当し、法的義務ではなく努力義務とされているものの、ウェブアクセシビリティ対応は企業にとって重要な取り組みであるといえます。

とはいえ、ウェブアクセシビリティ改善に取り組みたいけれど、どこから手をつけてよいか分からないという方も多いと思います。そんな方に向けて、まずは無料で改善が必要な箇所を見つけられるツールを厳選しました。また、実際にチェックツールを活用してプロダクトを改善する手順についてもご紹介しています。

ぜひ、ウェブアクセシビリティ対応の最初のステップとしてご活用ください!

ウェブアクセシビリティの無料チェックツール7選と活用ステップ【デザイナーおすすめ】

デザイナーにおすすめの記事

少しピンポイントな知識にはなりますが、コンポーネントの使い方に迷ったとき、複雑なインタラクションをプロトタイプで再現したいときに便利なナレッジを共有している記事を2つご紹介します。

押せる・押せないコンポーネントの違いと効果的な使い方

良いデザインとはなにかの一つに、ユーザーがストレスに感じない、つまり直感的に操作できるかどうかというのがあると思います。

この記事では、ユーザーにとって「押せるのか、押せないのか」判別がしづらい、Tag, Chip, Badge, Lozengeと呼ばれるコンポーネントにフォーカスしました。それぞれのコンポーネントの違いと、どう使えばユーザーが直感的に分かりやすいデザインになるのかを解説しています。

コンポーネントの役割を理解して、ユーザー体験を向上させるようなデザインにしたい、デザイン力をレベルアップさせたいという方はぜひご参考ください!

押せる・押せないコンポーネントの違いと効果的な使い方

 

Figmaプロトタイプで、「スクロールすると見た目が変わるヘッダー」を再現する【中級〜上級者向け】

Figmaのプロトタイプ機能を使えば、デザインや開発の段階であっても、実際の操作感に近い形で画面遷移や機能を試すことができます。

少し複雑な挙動でも、Figmaの機能を組み合わせることで再現できることをご存じでしょうか?この記事では、Webサイトにおいて「スクロールすると固定ヘッダーの見た目が変化する」動きを再現する方法をご紹介しています。

「この動きを再現したいけどできないかも」とあきらめていた方は、ぜひご紹介している方法を試してみてください!

Figmaプロトタイプで、「スクロールすると見た目が変わるヘッダー」を再現する【中級〜上級者向け】

困ったらUI/UXデザインができる開発会社に相談しよう

今回は、2024年下半期にin-Pocketで公開したデザイナー執筆の記事をご紹介してきました。今後もUI/UXデザインに関する実践的な記事を公開していきますので、ぜひご注目ください!

記事を読んでも解決できそうにない、専門家に一度相談したいという場合にはこちらの記事も参考にしてみてください。

UI/UXに強いおすすめ開発会社4選:OOUIとデザインシステムでより良いユーザー体験を実現

アイスリーデザインではUI/UXデザインとその実装に関するご相談をお受けしております。お気軽にお問い合わせください。

  • Contact

    お問い合わせ

    アプリやシステム開発、UIUX改善など、お客さまのビジネスを成功に導いたサポート実績が多数ございます。お気軽にお問い合わせください。

  • Download

    資料ダウンロード

    私たちのノウハウや業界別の事例など、提供するサービスについて詳細にまとめた資料になります。ぜひご一読ください。

  • Mail magazine

    メールマガジン

    UI/UXデザイン・システム内製化・DX推進についてのお役立ちメソッドや、限定イベントや最新事例などをお届けします。