「Ameba」アイコン刷新 一貫性と再現性追求のための設計術 | CyberAgent Developers Blog
GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと
共創するためのデザイン批評
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
1画面を平面ではなく側面で考える UI Stack｜みーた
さてさて、今回の本題。 最近プライベートで新規サービスのUI監修みたいなことをやったのですが、その際に「UI Stack」の考え方が意外と知れ渡ってないように感じたので、要点だけの内容ですが綴ってみたいと思います。 元の話は英語でこちら↓に詳しく書いてあります。 しっかり読み解いてみたい方は覗いてみてください。 1画面は平面ではなく側面があるPinterestやDribbbleなどで「パッと見の雰囲気いいなぁ」というデザインには最近よく出くわすようになってきて、それを新規の画面やサービスに取り入れようと考えることが多いかと思いますが、実装までいって使ってみたけど「なんか違和感あるな」みたいなことありませんか？ それは「1画面の側面を見れていない」からかもしれません。 側面とは一体なんなのか。 それは「状態」です。 私達の住む世界は必ずしも完璧ではなく、間違いや遅延が発生します。それはサーバ
CSSにおけるマージンの相殺を徹底解説
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は
Web FontによるCore Web Vitalsへの影響と使い続ける方法｜平大志朗
だれかWebのチョットワカル人、 「(日本語など大容量の)Web FontのCore Web Vitalsへの影響 使い続ける方法とその是非」 を記事に書いてほしい。。。 preload頼りでいいんだろうか。どのくらい失敗するんだろうか…… — 辻正浩 | Masahiro Tsuji (@tsuj) January 20, 2021 私自身も、WebフォントがどれくらいCore Web Vitals影響するのか、影響を回避しながらWebフォントを使う方法がハッキリ分かっていなかったので、調査してみました。 本投稿はWEB上から入手できる情報源をもとに内容をまとめています。情報の正確性には留意していますが、私の独自の解釈・予想も含まれています。以上から、本情報はいち見解として捉えていただきますようお願い致します。WebフォントによるCore Web Vitalsへの影響とはCore Web
UIデザインのためのブックリスト（2020, 追記あり）｜yoshi_design
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI（ユーザー・インタフェース）が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい（と言ってもiPhone発表から10年以上経ちますが）「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ（情報設計やウェブ・ユーザビリティーを含む）のインタフェース・デザインについては、すでに世の中に知見や
エンジニア向けの余白の基礎 / Spacing
Webサイト、アプリ、資料などの品質を上げたいと思っているかたに向けた、余白（スペーシング）の基礎についての資料です。 関連記事：8の倍数ルールでデザインする理由とメリット・デメリット https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/ 以下、2020年8月24日に追記しました。 この資料を見ていただいた方、コメントをくださった方、ありがとうございます。「目がチカチカする」、「なぜ正方形の余白だと整った印象になるのか？」などのアドバイスや質問をいただけました。いただいたアドバイスを元に以下の点をアップデートしました。 - 資料全体のコントラストを下げました。以前より目の負担が軽減されるように背景色を調整しました。 - 余白の大きさ指定に正方形を使う理由を追記しました。余白の大きさを指定する際に正方形の余白を使
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 | Yuya Kinoshita
line-heightの不要な上下の余白を打ち消して、デザインデータに沿ったコーディングを効率化する方法 Webサイトのコーディング（実装）では、デザインデータ通りの数値を反映しているにも関わらず、ブラウザ上の表示がデザインデータと比べてずれる（余白が大きくなりすぎる）場合があります。 これはブラウザのline-heightの仕様によるものですが、line-height制御の難しさがデザインデータとコーディング後（ブラウザ表示）の余白のずれにつながっていると考えています。 この問題を解決するため、line-heightの不要な上下の余白を打ち消すCSSを試したところ効果を実感できたので、この方法のメリット・デメリットや活用についてまとめました。 チームで進めている実際のプロジェクトでこの方法を試してから、2020年1月の時点で9ヶ月ほど経ちますが、メリットとデメリットを比較してメリットが完
フロントエンドエンジニアがデザインできるようになると何が嬉しそうか｜seya
今年の春ぐらいから独学でデザインを練習し始めたのだが、そもそもやり始めた自分のモチベーションと、実際やってみて「こういうところがフロントエンドエンジニアとしての業務にも活きそう！」と感じたことを言語化しようと思う。 ここで言う"デザイン"とは何かはじめに、デザインと一口に言っても主語が大きいので、イメージがずれないよう具体的に述べると、いわゆるUXの5段階モデルの「表層」と「骨格」をイメージしている。 具体的なDoで言うと「実装者がUIを作る時の指針となる成果物としてのデザインを作ること」、もっとざっくり言うとFigmaなりSketchなりで本番でも使われるデザインを作ること。 思うに構造より上のレイヤーの"デザイン"はプロダクト開発に携わる人なら普段からある程度やっているのではないかと思う(もちろんかける時間の比重はデザイナーやPdMというロールを持っている人の方が多い)。 個人的にそも
海外で働くデザイナーになるまでの道のり。｜ベルリンのしょこたん
Sugu Mizunoさんからの質問です。 「しょこたんさんが、どのようにしてデザイナーとしてのスキルを身につけ、日本人なのに海外の地で働けるようになったか？」 という回答をします。 が、多分、これは私がやったことであって、他の人の参考になるかはだいぶ謎です。 「デザイナーになる、海外の地で働く」という頂上は一緒でも、 1人1人その人によって、頂上を目指すベストルートは違うので、 どの道がSugu Mizunoさんに合うかはわかりません。 目指すべきレベルは人によって違うので、自分がめっちゃ目指したい！っていう好きな人をおいたらいいと思います。 けど、「目指すべき人をおく＝その人以上にはなれない」です。 自分がなりたいようになれば一番いいと思います。 みんな適した道がありますからね。 人と同じじゃなくていいですからね。 という前提で、しょうこのこれまでの道のりをお話をします。 長いです。
フロントエンドエンジニアからデザイナーにジョブチェンジして1ヶ月経った
今回はFOLIOでフロントエンドエンジニアとして活躍している大木尊紀（@takanoripe）へのインタビューです。エンジニアでありながら、ディレクター的、デザイン的な思考でプロダクトの開発に寄与している大木は、どういう思いでFOLIOに入… 今回の転職活動で感じたこと上の記事とか各種登壇とかのおかげで「UIデザイン+エンジニアの人」という認識が広まったのか、今回の転職活動では「UIデザイン寄りのフロントエンドエンジニア」みたいなポジションでお誘いをいただくことが多かったです。僕自身もその分野に興味があったし面接でもそういうポジションやっていきたいという話をしていて、とても良いお誘いをいくつも頂けて感謝しかありません。しかし、一方でこう思っていました…。 「デザイナー経験がないやつがデザインのこと偉そうに語ってて大丈夫なんか？」 ということでデザイナーとして働き今まで以上にインターフェース
chot.design - 毎日ちょっとずつデザインを学ぼう
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
ユーザーインタフェース設計で意識したいデザインの考え方｜はのめぐみ
こんにちは！はのめぐみです。キッチハイクというサービスでプロダクトデザイナをしています。 2月にデザイン戦略部メンバーで社内勉強会を行い、アプリケーションのデザイン原則についてレクチャーをしました。この note ではその内容を紹介していきます🙌 勉強会のゴールは「足並みを揃える」ことキッチハイクのデザイン戦略部は、コアスキルや得意分野が違うメンバーが集まっています。バランスがとれたメンバー構成である一方、UI や Figma の知識、ルール感覚はチーム内でバラバラです。UI デザインをコアスキルとしているのは私1人というのもあり、みんなの足並みを揃えたいと思っていました。 知識がないと、どう調べればいいかすらわからないこともあります。自分が「当たり前だ」「常識だ」と思っているものも、専門外の人にとってはピンと来ないときも多いと思います。 そこで、デザインの当たり前をチームの当たり前にす
COVID-19 国内症例マップ（ダッシュボード）を作成して考えたこと - Bi-Bo-6
※3/1追記。続編のようなものを書きました。 メディアの外側から COVID-19 国内症例マップ を発信する意味、シビックテック - Bi-Bo-6 私達で作成・更新を続けている、GISを用いた新型コロナウイルスのダッシュボード（公開情報一元化）について、独立行政法人 国際感染症センターさんが、Facebookでシェアをしてくださいました。ありがとうございます。17日に公開したこのレイヤは、22日深夜までで70万viewになりました。 www.facebook.com 都道府県別新型コロナウイルス感染症患者数マップ そこで、このダッシュボード作成で感じたことを書いておこうと思います。（論文か？） ◯ダッシュボード本体 https://jagjapan.maps.arcgis.com/apps/opsdashboard/index.html#/641eba7fef234a47880e1e1
デザインデータブック 2019（ReDesigner Design Data Book） | ReDesigner
こちらは2019年度版のレポートです。ReDesigner Design Data Bookは、デザインの価値がどのように変化しているのかを定点観測するために100社にデザイナーキャリアやデザイン投資に関するアンケートを行ったレポートになります。
はじめて!!会社のロゴをつくって制作プロセスをまとめてみた｜株式会社メルタ｜note
はじめに株式会社メルタという3Dプリントの会社でデザイナーをしている、 みつもりです。 Webサイトのデザイン・たまにコーディング・広報物の制作 等々 幅広く制作しています。 特技は、イラストを描くこととモノマネをすることです。 よろしくお願いします。 今回は、会社のロゴをつくったので、制作プロセスをご紹介します＾＾ ロゴをつくる時の参考になればなと思います！！ ・ きっかけ ・ MELTAになった経緯 ・ ロゴのシンボル ・ シンボルの色 ・ ロゴタイプ ・ さいごにきっかけロゴをつくったきっかけは、社名変更です。 もともと弊社は「X人の株式会社」という社名でした。 社員数に応じて「X」の部分に数字が入るという異例の社名変動システムを導入していました。 しかし創業3年目にして… 「電話口で『エックスにんの…あ、Xはアルファベットで…』と説明するのが大変」 「ふざけた会社だと思われて、大人
育児中で時間がないデザイナーのためのインプット&アウトプット方法｜Fenrir Designers
子どもができる前までは、週末が来るのを心待ちにしていた。 金曜の夜はいつも夜更かしして、本を読んだり、録画したドラマをみたりして、昼に起きてカフェでブランチして映画を見に行ったり、はたまた家から一歩も出ないでガラスの仮面を読んだり。 新しいデザインツールが出てきたら、片っ端から試したし、自分のブログも更新したし、絵を描いて絵本を作ったりもした。あまつさえ、ジムに行って腹筋を鍛えることすらできた。 自分がどの時間を使って何をするのかは自分でコントロール可能なもので、時間とは作るものだと思っていた。 私の子どもは現在 5 歳、まだ週末を十分に理解しない。彼には毎日、日の出とともに新しい日がやってくる。それは希望に満ちた日だ。 今が何曜日の何日なのかは関係ない。目覚ましも必要ない。私は毎朝5時に、それはそれは可愛い声で目を覚ます。 「 ママおはよう、お腹空いた 」 時間がない時間がない、時間がな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home | Laws of UX
UXデザインが大事なのはわかるけど�エンジニアの私ができることってなんでしょう？�