コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。

2021年12月3日に本テキストブックを題材に、デザイン経営の考え方や導入方法、テキストブックの制作秘話などについて語るオンラインイベントが開催されました。下記のリンク先からアーカイブ動画をご覧いただけます。 詳しくはこちら（外部サイト） > 富士通のこれまでの実践から得られたノウハウと、イタリアのミラノ工科大学デザインスクールPOLI.Designの研究成果やフィロソフィーを組み合わせた、デザイン思考のテキストブック「Transformation by Design デジタルトランスフォーメーションに挑戦するデザイン戦略とサービスプランニング」（日本語版・英語版）を公開いたします。このテキストブックはPDFで閲覧可能です。またテキストブック制作の背景や制作チームの想いなど、制作のディレクターを務めた宇多村志伸と高嶋大介に話を聞きましたので、ぜひダウンロードの際に併せてお読みください。

ノルウェー大使館 @NorwayinJapan #ノルウェー でも #紙幣 刷新が行われています。偽造防止・セキュリティ強化した新紙幣デザインには #ノルウェー アイデンティティのシンボルとして「 #海」がテーマに選ばれました。人々をつなげる海、世界へ未来へと導く海、恵みと繁栄をもたらす海をイメージし各モチーフが描かれました。 pic.twitter.com/OMQAesFPEv

じゃーん！新一万円券 https://t.co/a7emAPkOOt https://t.co/9ZangzrnZB

GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと

Googleが提供するサービスのアイコンのデザインがアップデートされ、並べてみるとこんな感じになりました。

「事態が落ちついたら、また。」「このご時世ですから」と繰り返し唱えていたら2020年も半分がおわり、梅雨が明け、麦茶を煮出す回数が増えました。そして、ご時世のおかげで飲み会やイベントがすべて消え去ったことで貯金が増え、定額給付金も手に入ったので、「いい機会だから」とPCを新調することにしました。 iOSアプリエンジニアという職業柄、OSはMacになります。持ち運びできるMacBook Proもいいですが、据え置きタイプのほうが費用対効果が良いのでiMacかMac miniにしたいところです。当分の間は家で開発することが多いでしょう。 そんな折に、こちらの記事に出会いました。 note.com この記事で「なるほどMac miniを机の下にくっつける手があるか」と合点がいったので、Mac miniを注文。それにあわせて、デスク環境も力強く整えることにしました。 [2020/08/03 14:

UX JAM in FUKUOKA 01

こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効

KDDI（au）は8月28日、第5世代移動通信システム「5G」のロゴを刷新した。メタリックデザインを採用し、先進感、未来感を表現したという。同社は2020年3月から5Gサービスの提供を始める予定だ。 また、大量のデータを瞬時に扱うことができる5G時代に「今までの制約から解放された『UNLIMITED WORLD』を始動する」とも発表。パートナー企業とのコラボレーションによるサービス開発や、スタートアップ企業のアイディアを取り入れた取り組みを進めるとしている。 関連記事 ベイスターズとKDDI、5G活用「スマートスタジアム」で協力　「好きな視点でリプレイ視聴」実現へ 横浜DeNAベイスターズとKDDIは、5GやIoTを活用した「スマートスタジアム」の構築に向けたパートナーシップ契約を結んだ。5GとXR、自由視点を組み合わせた映像技術を活用し、ファンが好きな視点でリプレイ視聴できる新たな野球観

カメラが苦手な人へのアドバイス「これだけ気を付ければ大事故は起きないんじゃないかなまとめ」が好評です。カメラが苦手なご主人のために作られたもので、人物撮影のポイントが、分かりやすくかわいくまとめられています。 まずは構図。構図にはいろいろパターンがありますが、取りあえず一番よく見かける“三分割法”を紹介。画面を縦と横に3分割して、交点のどれかに被写体を置いて撮影します。これを守れば“大事故”は防げるでしょう。 次にアップの撮影です。とにかくやってはいけないのは“首切り”。切るのであれば、首から下ではなく頭の上の方を切りましょう。 まず三分割法を覚えて／“首切り”はやめよう（画像提供：きはるさん） 他撮り事故案件No.1と思われる現象が「光について」のトラブル。オシャレな飲食店でよく起きる悲劇です。照明が暗い場所で、光源が真上にある場合、顔に影が落ち、相当な美女でないと耐えられない写真になり

2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

Chris氏はプロダクトマーケティングマネージャーであり、デザインとタイポグラフィのバックグラウンドを持っています。アカデミー・オブ・ファイン・アーツでインストラクターを務め、学生にデザイン理論とソフトウェアデザインについて教えています。 デザインシステムをどのように作成すれば、サービスが拡大する際にデザイナーや開発者がいつも直面する問題を解決できるのでしょうか。 少し前に、UXPinのCEOであるMarcin Treder氏は、社内のデザインシステムの構築に役立つ一連の記事を執筆しました。業界のリーダーたちにインタビューすると、世界中のチームにおいて頻発する問題はデザインの一貫性の欠如であるとわかりました。また、デザインチームやユーザーにとって、この一貫性の欠如は数多くの問題を引き起こす可能性があります。 ユーザーの混乱：同じアクションなのにさまざまなパターンがあると、ユーザーは混乱して

by Igor Miske 建築形式のひとつである「ブルータリズム」を基に、ウェブサイト本来のあるべき姿に焦点を当てて作られたデザイン手法が「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」です。「雑誌ではないが雑誌のような記事が載っている」「アプリケーションではないが商品の購入やユーザーとのやり取りに使える」「データベースではないが、データベースによって動く」といった複数の側面を持っているのがウェブサイトであり、サイト訪問者に対してコンテンツを純粋に楽しむための方法として提供されるものであるとして、ブルータリスト・ウェブ・デザインは構築されたとのこと。そんなブルータリスト・ウェブ・デザインのガイドラインを、エンジニアのデイビッド・コープランドさんが記しています。 Brutalist Web Design https://brutalist-web.desig

2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W

ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン

楽天は6月26日、7月2日からグローバルの統一ロゴを一新すると発表した。同社は昨年、ロゴの表記の大半を「楽天」から「Rakuten」に改め、丸付き「R」の文字を冒頭に付けるリニューアルを実施したが、今回、ほとんどのロゴで「Rakuten」表記を採用し、漢字の「一」をモチーフにしたデザインに変える。丸付き「R」のデザインは、一部を除いて廃止する。 モチーフにした「一」には、「はじまり」「ひとつになる」「一番・最高」「唯一」という4つの意味を込めた。「新しいグローバル統一ロゴのもと、人々の暮らしをより豊かで便利なものへと変える挑戦を続けていく」としている。 Webサイトやアプリのロゴは順次リニューアルする。新ロゴは既に、楽天がパートナーシップを結んでいるサッカー名門クラブ「FCバルセロナ」や、楽天がスポンサーを務めるJリーグJ1クラブ「ヴィッセル神戸」、プロ野球チーム「東北楽天ゴールデンイーグ

フェンリルのプランナーの柴田です。 デザイナーではない人にとって、デザインの良し悪しを判断するのは難しいものですよね。「なんとなく良い」「ピンとこない」まではわかるのですが、「なぜ良いのか」「なぜピンとこないのか」を言葉にするのは、それなりの経験と知識が必要となります。 しかし、そこをきちんと言葉にできないとデザイナーへのフィードバックは難しく、適当な指示で無駄な作業をお願いすることになります。何よりプランナーは自分でプレゼンすることが多く、デザインの魅力をクライアントに十全に伝えることができなくなります。この「デザインを言葉で説明するの難しい問題 」は、最もありふれていながら対処が難しい問題です。 今回はデザインの勉強もしていない僕が、どうにかデザイナーさんやクライアント様に対してデザインを言葉で議論する時の方法論を整理してみたいと思います。 デザイナーもデザインを説明するの難しい実はデ