勉強になったFigmaのデザインシステム8選｜東 莉緒／Rio Azuma
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
心理学から学ぶ！心地よいUXデザインを作る方法
心理学や神経科学からUXデザインを良くする方法について紹介。ユーザー体験を最大化するためにUXは欠かせません。1990年代のインターネット初期の事例から現在に至るまでWebサイトのデザインなどどう変遷してきたのか、必見です。是非ご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。
San Francisco フォントを探る - Qiita
San Francisco Font Family San Francisco はひとつの書体ではなく、SF Pro, SF Compact などと呼ばれ、それぞれに Text, Display, Rounded バージョンが存在します。Text よりも Display の方が多くのウェイトを揃えているのは、Text は視認性を重視した書体ゆえ、細いものは利用する想定にないからなのだと思われます。SFシリーズはVariable fontに対応しています。 SF Pro vs. SF Compact SF Pro は macOS や iOS, tvOS デバイスのシステムフォントとして採用されています。SF Compact は Apple Watch のシステムフォントとして採用されています。Compact は字が四角形に近い形をしていて、Apple Watch のような小さなデバイスでも視
Apple の新フォント San Francisco の秘密
iOS 9 が一般公開されました。気づきにくいところですが、実はこの iOS 9 から、システムフォントが Helvetica Neue から、Apple が新たに開発した San Francisco フォントに変更されています。 San Francisco は Apple Watch のシステムフォントとして既に採用されていましたが、Apple Watch にとどまらず、iOS 9 や次期 Mac OS X “El Capitan” のシステムフォントとしても使われるようになります。 Apple WatchApple は、初代 iPhone からずっと、iOS のシステムフォントとしては Helvetica を採用してきました。また、Mac OS X でも 10.10 Yosemite からは、それまで使用していた Lucida Grande から Helvetica へと変更しています
【インタビュー記事】日本人初のDribbblerに聞く、優れたUIデザイナーになる為の秘訣とは: 後編 | Goodpatch Blog
先日アップした「【インタビュー記事】日本人初のDribbblerに聞く、優れたUIデザイナーになる為の秘訣とは: 前編」の後編です！ 後編では貫井伸隆氏のデザインが生み出される作業環境やスキル向上の為にやっていること、デザインをする上で大切にしていることなどについてインタビューした内容をまとめました！ 貫井伸隆氏のDribbbleページ→ https://dribbble.com/nobtaka ーー貫井さんは普段どんな環境で作業されていますか？ （↑貫井氏の自宅作業環境） メインで使っているマシンはiMacの27インチモデルで、他にApple Cinema Display 23インチも使っています。周辺アクセサリーはUS配列のキーボード、Magic Mouseを使っています。 ソフトはPhotoshop、ピクトグラムを作る時にIllustratorも使いますね。他には slicy、xSc
Appleが利用するフォントを徹底解剖 | ブログヘラルド
アップルが広告や宣伝にどのフォントを利用しているのか気になったことがあるだろうか？コンピュータのキー、MacのUI、iPhoneにはどのフォントが利用されているのだろうか？以下にアップルが利用するフォントを挙げていく。 ブランドアイデンティティ 全ての広告素材、プロモーション、アップルのウェブサイト、そして、光り輝く製品の箱には、アップルはミリアド・プロ・セミボールドと呼ばれるミリアドのバリエーションを利用している。サンセリフの書体であるミリアドは1992年にアドビによって初めてリリースされていた。現在、アップルだけでなく、グーグル（Gmailの最後の3文字）、リンクトイン、ロールスロイス、そして、ウォルマートもミリアドを採用している。アップルは2002年からミリアドの利用を始めている。 それ以前は、アップルはギャラモンの利用に拘っていた。アップルが利用していたフォントはアップル・ギャラモ
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
Appleのウェブデザインから学ぶ、ディテールを強化する9つのポイント
Designer Dailyの記事を参考に、Appleのウェブデザインからディテールを強化する9つのポイントを紹介します。 Creating beautiful web designs: 9 details that matter Apple [ad#ad-2] 下記は各ポイントを意訳し、Appleのサイトを例にしたものです。 ドロップシャドウ ドロップシャドウは、デザインに深さを与える素晴らしいテクニックです。しかし、計画的に使用しないと、とても素人くさい外見になってしまいます。 良いドロップシャドウを作るには、2つの重要なポイントがあります。 シャドウは繊細にする。 ページ内の光源は一貫したものにする。
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
アップル ヒューマンインタフェースガイドライン
第１章 デザイン工程 本章はどのようにしてあなたのソフトウェアに最高のデザインを選択するかについて、いくつかの基本的な秘訣を提供します。優れたソフトウェアデザインには、あなたのユーザの要求に対する慎重な分析を伴います。結局のところ、あなたの製品を実際に使用するのは彼らなのです。彼らの要求を見分け、これらの要求に合致する手段を見つけることは、デザイン工程における重要な最初の一歩となります。 デザイン工程にユーザを関わらせる あなたの製品を、目標とする視聴者の要求にしっかりと合致させるための最善の方法は、あなたのデザインをユーザの精査にさらすことです。デザイン工程のすべての段階においてこれを行うことで、あなたの製品の機能は正しく動作し、改良の必要があるのかという点を明らかにする指針となります。 人々にあなたの製品（の試作品）を試用する機会を与えるとき、あなたはデザイン段階の初期では予想もしなか
Appleのデザイン戦略をウェブサイトから学ぶ、15のデザインヒント
Appleの美しいウェブサイトから学ぶ実用的な15のデザインヒントをDesign Shackから紹介します。 15 Design Tips to Learn From Apple 下記は各ポイントを意訳したものです。 サイトのキャプチャは可能なものは日本サイトのものにしています。 はじめに Apple社は高級なデザインと類語です。Appleが発信する偉大なデザインを観察することから、学べることはたくさんあります。 ここにあげた15のポイントはあなた自身の仕事に活用されることを意図したものです。この素晴らしいサイトデザインをあなたのインスピレーションとして使用してください。 1. Keep it Simple アップル Appleのウェブサイトを一目見てください。そして、あなたの目に見えるものではなく、見えないものについて注目してみてください。 例えば、空港でトイレを探していると想像してくだ
アップル ヒューマンインタフェースガイドライン
アップル ヒューマンインタフェースガイドライン 原文：Apple Computer Inc. 訳：かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
Apple Design Resources
スティーブ・ジョブズの名言に学ぶ「シンプルをデザインする」5つの秘訣 : earth in us.
新着記事
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos