トップ > デザイン

Figmaで「方向キーによる選択オブジェクトの移動距離」を変更する方法

デザイン Figma

Figmaでデザインを行うとき、選択したオブジェクトの位置を方向キーによって微調整することがよくあると思います。

このとき、デフォルトでは

  1. 方向キー: 指定した方向に1pt移動
  2. Shiftキー＋方向キー: 指定した方向に10pt移動

という動作をしますが、昨今のデザインでは8ptを基準としたグリッドシステムを採用することが多いため、本記事ではShiftキー＋方向キーを押したときの移動距離を8ptに変更する方法を紹介します。

続きを読む

IllustratorとPhotoshopでテキストエリアのサイズをテキストと独立した状態で可変にする方法

デザイン Illustrator Photoshop

IllustratorとPhotoshopでテキストを扱うとき、テキストエリアのサイズを変更するとテキストのアスペクト比も同時に変更されてしまい困る場面が多かったので、テキストエリアのサイズをテキストと独立した状態で可変にする方法について調べてみました。
Illustrator 2020 v24.3(macOS)とPhotoshop 2020 v21.2.4(macOS)で試しています。


  • Illustratorの場合
    • ポイント文字とエリア内文字
    • ポイント文字とエリア内文字の見分け方
    • エリア内文字を新規に追加する方法
    • 既存のポイント文字をエリア内文字に変更する方法
    • テキストエリアのサイズを変更する方法
  • Photoshopの場合
    • ポイントテキストと段落テキスト
    • ポイントテキストと段落テキストの見分け方
    • 段落テキストを新規に追加する方法
    • 既存のポイントテキストを段落テキストに変更する方法
    • テキストエリアのサイズを変更する方法
続きを読む

<merge>タグ内のレイアウトのプレビューを適切に表示する方法

プログラミング Android ConstraintLayout デザイン UI

タイトル通りの内容です。
結論から言うと、<merge>タグのtools:parentTag属性に追加先のレイアウトのLayoutを指定すればOKです。

続きを読む

OSバージョン間の差分を考慮したAndroidのThemeの定義方法

プログラミング Android デザイン UI

OSバージョン間の差分を考慮したAndroidのThemeの定義方法について整理してみました。基本的にはAppCompatライブラリの定義方法を参考にしています。
Themeについては以下の公式ドキュメントをご参照ください。

developer.android.com


以降は、Android 7.0で追加されたマルチウィンドウ、Android 9で追加されたディスプレイ カットアウトに関する設定をThemeに追加するケースを例とします。

続きを読む

AndroidでHaptic Feedbackを実装する

プログラミング デザイン Android

本記事では、iOSではおなじみのHaptic Feedback(触覚フィードバック)をAndroidで実装する方法について記載しています。
「Android Dev Summit 2019」の動画で実装例が紹介されていたので、こちらを参考にしました。


Haptic FeedbackについてはMaterial Designの以下のページが参考になります。

material.io

続きを読む

ディスプレイにおける解像度の話

プログラミング デザイン

解像度についていろいろと調べてみました。
調べていると、解像度の表す意味が分野によって異なることが分かったので、本記事ではPCやスマートフォンのディスプレイにおける解像度についてのみ取り扱います。

なお、本記事は各用語の大まかな意味を理解することを重視しているため、正確でない表現がある可能性があります。
説明として明確に誤っている内容がありましたらご教示いただけますと幸いです🙇‍♂️


続きを読む

UIの文言の決め方とOOUIの話

プログラミング DDD デザイン UI

Webサービスの開発をしていて、UIの文言について悩むことはありませんか？
個人的には、あるボタンのラベルを名詞か動詞のどちらにするべきかで悩むことが多かったです。
そんなときに「他のサービスでもこうなってるし、xxがいい気がする」などと経験則に基づいて判断することはある程度できるものの、それを論理的に説明することが難しいと感じていました。

もしかしたらこのあたりは言語学や心理学に関わる話で、下手に深入りしない方がいいのでは？と思う時期もあったのですが、名詞か動詞のどちらにするべきかのヒントとなるnote記事にあるとき巡り合いました。

続きを読む

仮説検証型UXデザインのワークショップに参加しました

勉強会 UX デザイン

11/16(土)に開催された仮説検証型UXデザインのワークショップに参加してきました。

産業技術大学院大学の履修証明プログラム 「人間中心デザイン」の講師でもある、ギルドワークス社のちゃちゃきさん(@chachaki)に行っていただいたクローズドイベントでした。
ワークショップを中心に約6時間みっちりUXデザインに触れることができ、学びの多い時間となりました。

当日の参加者によるツイートがtogetterにまとまっているので、併せてこちらもご覧いただければと思います。

togetter.com

続きを読む

「UX Engineer Meetup」に参加しました

勉強会 デザイン UX

10/7(月)に株式会社グッドパッチで開催された「UX Engineer Meetup」に参加してきました！

goodpatch.connpass.com


今までのイベントレポート的な記事では発表内容の要約と感想を書いていたのですが、今回のイベントは「UXエンジニアとは何か？」というモヤモヤを解消するヒントを得るために参加したので、そのあたりに対する私なりの理解をメインに書きたいと思います。

続きを読む