マガジンのカバー画像

UIまとめ

107
本
UIに絡んだ記事をまとめてます。
運営しているクリエイター
GORIN

#Webデザイン

Nao Komura

Nao Komura

Figmaのプランを理解せずに契約すると多分困るので解説

Figmaのプランを理解せずに契約すると多分困るので解説

2019/02/26 追記
Figmaのプラン内容少しづつ更新されています。この記事の内容は現行プランとは少しズレている部分があるので、公式サイトでの内容の確認は必須です！
例えば、フリープランでは2メンバー以上招待できない（editor/viewer関係なく）とこの記事にはあるのですが、現行のプランだとeditorが2名以上招待できないだけで、viewerは制限なく招待できます。

こちらの記事

もっとみる
デジタル庁

デジタル庁

デザインシステム勉強会を開催しました

デザインシステム勉強会を開催しました

デジタル庁では、将来的に省庁サイト等への適用も視野に入れた「デザインシステム」の構築を行っています。

その一環として、デザインシステムについてのご意見をいただくため、7月29日に有識者を集めたデザインシステム勉強会を開催しました。

デザインシステムとは？
現状、各省庁の Web サイトは個別に構築されており、各 Web サイトの情報構造や見た目がそれぞれ異なっています。

利用者にとっての使い

もっとみる
ハラヒロシ / デザインスタジオ・エル

ハラヒロシ / デザインスタジオ・エル

デザインラフ、公開します

デザインラフ、公開します

僕にとって、デザインのプロセスの中でもアナログなラフ描きが欠かせません。手描きに込められた線には能動的な意思があって、それが結果的にデザインに宿ると思うからです。手描きラフに着手した途端に没入して元気さえでてきます。ああしたいこうしたいと、言葉や素材を吟味しながら「体重のせて描く」感じがいいのですよね。

そしてそのラフは、必ずとっておきます。手描きのラフは何回も書き直すので、思考とブラッシュアッ

もっとみる
重松佑 / Shhh inc.

重松佑 / Shhh inc.

Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ

Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ

先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。

0. 情報設計とトン

もっとみる
ayakoMoritomoDesigner

ayakoMoritomoDesigner

ナビゲーションは左？右？WEB屋は何を考えているか

ナビゲーションは左？右？WEB屋は何を考えているか

以前、ちょっと現実逃避にWEBのナビゲーションについてただひたすらグダグダ書きたいと呟いたところ、他分野が中心のデザイナーさんが興味を持ってくださったのでひたすら書いてみました。ナビゲーションと言ってもどの？となると思いますか、今回書いたのはメニュー、グローバルナビゲーションと呼ばれる、サイトのどこかに固定でまとまってリンクが並んでいるアレです。ここで記載している内容は個人的な見解ですが、部分的に

もっとみる
zaxirolls

zaxirolls

現実とWEBを「融かす」新しいスキューモーフィズム

現実とWEBを「融かす」新しいスキューモーフィズム

今回のお話同僚に教えてもらった記事についてみていきます。
皆さんは、スキューモーフィズムというデザインをみたことがありますでしょうか。

もしかしたらこんなデザインを昔みたことがあるかもしれません。

これはiOS3あたりかと思いますが、昔のiPhoneのデザインです。
今の若い人は一切みたことがないかもしれませんが、こんなにも物理ボタンのようなデザインをしていたのです。（今見るとダサいですが、当

もっとみる
n.hara

n.hara

今さらですが「トンマナ」って何ですか？

今さらですが「トンマナ」って何ですか？

こんにちは。
ajikeでUI/UXデザインを担当しているハラです。
最近の趣味は、夏が終わるまでにプールに何回行けるか挑戦することです。
がんばります。

はじめに最近、ajikeには2名の新人デザイナーと1名のディレクターが入りました（ようこそ、ajikeへ！）

今回は、同じように新しくデザイナーになった新人の方に向けて、「トンマナ」について書いていきたいと思います。

「トンマナ」って何？

もっとみる
LINEヤフーDesign 公式note

LINEヤフーDesign 公式note

LINEのUIデザイナーが参考にするWebデザインギャラリーサイト6選

LINEのUIデザイナーが参考にするWebデザインギャラリーサイト6選

こんにちは、UIデザイン4チームのイ・ジヘです。 今回は、LINEのUIデザイナーたちが日々参考にしているデザイン系のウェブサイトをご紹介いたします。

特にスマホのUIデザインは2007年、iPhoneが世に出た後から本格的に注目され始めたと言えるでしょう。 そう考えると歴史がまだ12年くらいしかないないんですね。さらに、用語さえもUI DesignとProduct Designが混用されている

もっとみる
Nao Komura

Nao Komura

FigmaではじめるUI（Web）デザイン｜Part1

FigmaではじめるUI（Web）デザイン｜Part1

Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。

そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......

もっとみる
Nao Komura

Nao Komura

FigmaではじめるUI（Web）デザイン｜Part2

FigmaではじめるUI（Web）デザイン｜Part2

Part1ではUIデザインの下準備として簡易的にデザインシステムを作りました。

ただ、前回作ったものはデザインシステムの空箱でしかありません。

空箱という言葉が示すように、変数的に定義したカラーやタイポグラフィをどのように意味づけていくかが残りのPartの目的の1つでもあります。

そして、そのデザインシステムを真に活用していくには横断的な組織が必要不可欠になってきます。
どうすれば横断的な組

もっとみる
UXマン / プロダクトデザイナー, UXリサーチャー

UXマン / プロダクトデザイナー, UXリサーチャー

実践UI Flows - UI制作のはじまり

実践UI Flows - UI制作のはじまり

UI Flowsは、37signalsというアメリカのウェブアプリケーション開発会社が生み出した、画面遷移図の上位互換的なUI制作ノウハウです。

チームで行う最初のUI制作フローUXデザインやエンジニアリングに比べ、UIデザインをチーム全体で進めるノウハウは意外なほど浸透していません。

これは、遷移図やワイヤーフレーム作りをディレクターと意思決定者間で行い、その後のUI制作はデザイナー個人に任

もっとみる
KAZUMA HIRAYASU

KAZUMA HIRAYASU

スマホのメニューボタン、上に置くか？下に置くか？

スマホのメニューボタン、上に置くか？下に置くか？

時代と共にスマホが縦長になっていく昨今。それに伴い画面上部にあるメニューボタンが、タップでよく使う親指から遠のいていきます。
この状況について言及している記事があります。

画面の上端は、親指がもっとも届きにくい領域です。メニューを上部に置くと、ユーザーはインターフェイスの操作が困難になります。ユーザーはメニューをきわめて頻繁に使用します。そのため、親指の届く範囲にメニューを設置することは不可欠で

もっとみる