マガジンのカバー画像

ui

16
運営しているクリエイター

記事一覧

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1

はじめにデザイナーさんからスマホのサイトのデザインデータを頂いて眺めていたら、以下のようなことをふと思いました。

基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。

結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応す

もっとみる
Figmaのオートレイアウトを完全に理解した話

Figmaのオートレイアウトを完全に理解した話

どーもーUI/UXデザイナーのうっくんです。
 ちょっと前にFigmaにオートレイアウトという機能が追加されました。

最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。

オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイ

もっとみる
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流

スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流

前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。

本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。

巨大化し続けるディスプレイサイズ2007年に初めてiPh

もっとみる
クリエイティブとは判断力。ふせんトレーニングのすすめ。

クリエイティブとは判断力。ふせんトレーニングのすすめ。

こんにちは。メルカリCXO室デザイナーのcremaと申します。

CXO室(Chief Experience Officer Team)の主な仕事は「ブランド構築」「UI / UX構築」「デザイン組織構築」です。この記事では、「デザイン組織構築」に関連した勉強会のひとつ「Talk with Takram」という試みについて、ご紹介します。

Talk with Takramとはメルカリでは、デザイ

もっとみる
三井住友銀行アプリについてお話します。

三井住友銀行アプリについてお話します。

こんにちは!三井住友銀行 デザイナーの堀と申します。
前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。

その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。
今回

もっとみる
デザイナーに必要なコミュニケーション能力とは何か

デザイナーに必要なコミュニケーション能力とは何か

デザイナーにコミュニケーションスキルが必要と言われるしその通りだと思うけど、日本の美大でコミュニケーション教育は重視されてないのに関わらず、社会に出たら突然「重要です!」と言われて最近の新卒は「突き放された気持ちになる」と言う話をたまに聞く。

社会人はデザイナーに限らず、コミュニケーションスキルが必要だけどデザイナーが不幸なのは教えてくれる人が極端に少ない点だと思う。

デザインスキルは楽器演奏

もっとみる
UIデザイナーの能力開発ステップと鍛錬方法

UIデザイナーの能力開発ステップと鍛錬方法

先日、経済産業省・特許庁の「デザイン経営」宣言もあり、デザインの重要性が話題になることが増えました。具体的には組織だったり、評価・報酬だったり、採用・育成だったり、多岐に渡っていると思います。
一方で「デザイナーがいない。」とよく聞きますし「誰かいない?」と相談も頂きます。そして、僕は、デザイナーの人口が増えて活躍することができれば、より良いプロダクトやサービスが溢れ、世の中はより良い方向に変わっ

もっとみる
新規登録 UI まとめてみた

新規登録 UI まとめてみた

シンプルだけど難しい「新規登録」のデザイン。
派手さはないけど、地道な工夫の繰り返し。

新規登録って大事
新規登録は離脱を抑えるデザインが重要です。
せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。

本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばう

もっとみる
検索 UI まとめてみた

検索 UI まとめてみた

検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。

パターン一覧
1. フリーワード型
2. サジェスト型
3. グループ型
4. あとからフィルター型
5. 条件指定型
6. レコメンド型

フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。

良いところ
シンプル。入力と同時に検索結果を表示できるので、最短で検索対象

もっとみる
2019年が終わるまでにデザイナーが絶対に読むべきnote50選

2019年が終わるまでにデザイナーが絶対に読むべきnote50選

こちらの記事を拝見させて頂き、これのデザイナー版を読みたいなと思ったので、自分でまとめました。

ただ調べていくうちに今まで読んだことのなかった神noteがどんどん出てきたので、結果的に2019年という枠を飛び越え、50選までいってしまいました。

偉大な先人たちの英知が全てのデザイナーに届くことで、世の中がデザインによってより良くなっていったらいいなと思います。

また最後の組織デザインについて

もっとみる
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。

なんでこんな話になったのか(前置きなので次の章まで飛ばしてOKです)

デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡され

もっとみる
UIのお作法。28個の「〇〇できそう感」をまとめました。

UIのお作法。28個の「〇〇できそう感」をまとめました。

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。

1、進めそう感

時間の流れは左から右に表現します。右矢印は次、進む、

もっとみる
Apple Musicのマイクロインタラクションを考察してみた

Apple Musicのマイクロインタラクションを考察してみた

つみきでデザイナーとして活躍してるYukikoです!
前回、Sound Cloud & Spotify のUI/UX考察記事を書いたところ、スキ♡をたくさん頂けたので、身近でポピュラーな分野で人気なアプリに関しては皆さんの興味関心も高いのかな~と思いウキウキしておりました。

今回は、続☆Music App編で超王道、Monthly課金( 980円 )もみじんも惜しくないApple Musicのマ

もっとみる
さらにカート内UIを改修しています - リリースしましたノートvol.3

さらにカート内UIを改修しています - リリースしましたノートvol.3

こんにちは。クラシコムのデザイナーの遠藤です。昨日、「北欧、暮らしの道具店」のカートページのデザインをさらに改修し変更しました!

以前、カートの商品をストックしておく画面の改修を行いましたが、今回はそのページ以降の購入手続き〜完了までのページを改修しました。

↓以前の改修については、こちらの記事をご覧ください。

今回、改修したのは以下の3画面になります。

(1)配送・支払い設定画面
(2)

もっとみる