Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
【2024年6月版】ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
ベイジは2010年の創業以来、ウェブ制作事業を中心に事業を展開してきました。この事業では、サービスの質を統一するために2014年頃からワークフローの整備に取り組んできました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 そして、様々なプロジェクトでこのワークフローを実用しながら、今もアップデートを続けています。 また今回のワークフ
Webデザインの参考になるギャラリーサイト11選 | Pulp Note
フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊して見るようにしています。今回は、私が参考にしているギャラリーサイトを11個紹介します。クライアントとの打ち合わせ時も担当者とイメージを共有できるので便利に利用できると思います。ぜひ参考にしてみてください。 URAGAWA 担当した制作会社を掲載しているギャラリーサイト。制作会社ごとに見て回れるのはおもしろい。カテゴリ分けも『業界』『タイプ』『特徴』『カラー』『特集』『アワード受賞』『ランキング』と他にはない分類ですが意外と使いやすいです。制作の裏側記事もあってWebデザインの参考だけではなく読み物としても楽しめます。 URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集 紹介文 URAGAWAは、クリエイティブカンパニーの情報を蓄積していくこと
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | キャリアハック（CAREER HACK）
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
実践的UXデザイン論 第5回 HCD（人間中心設計）におけるアイディア発想 | クリエイターのための総合情報サイト CREATIVE VILLAGE
UXとは「User Experience：ユーザーエクスペリエンス」の略称で、製品やサービスを使用することで得られる体験を指します。 使いやすい・わかりやすいだけに留まらないユーザーのやりたいことを「楽しく・心地よく」実現するための思考法や手法を人間中心設計の普及に取り組まれている松原さんに伺いました。 今回お話を聞くのは… 松原 幸行（まつばら・ひでゆき） 美術専門学校を卒業後、パイオニア、富士ゼロックスのデザイン部門を経て2006年からキヤノン・総合デザインセンターに所属。アドバンストデザイン部門や業務系ユーザインタフェース部門をリード。 メーカー勤務と並行して、2004年にNPO法人 人間中心設計推進機構（HCD-Net）の設立に加わり、以後、理事としてHCDの普及に勤めている。2009年にHCD認定専門家資格を取得。著書に「ユーザビリティハンドブック」（2007年、共立出版、共著）
ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita
ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で
クラウドワークスを作り変えるUXガイドライン（11ヶ条33項）の中身を初公開 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは、UXデザイングループのデザイナーの上田です。最近ハマってる音楽は、先日オススメしてもらって聴き始めた Little Glee Monster でして、 先月発売の「だから、ひとりじゃない。」を永遠リピートする日々です。 さて、クラウドワークスのUXデザイングループでは、仕事（発注者）と受注者のマッチングサービス「クラウドワークス」の提供すべきユーザー体験の指針として、2017年1月に“UXガイドライン”を作りました。 デザイナーイベントのUX JAM 14で、「自分たちでつくった『UXガイドライン』を片手に、クラウドワークスを作り変える」といったテーマで社外向けの発信はしており、SNSやイベントなどで一部反応は頂いていたものの、ガイドラインの内容自体は公開できてませんでした。そんな中で、もろもろ準備が整ってきたので、今回の記事では初めてその中身を公開できればと思います。 UXガ
【デザイナー向け】これからAndroidのデザインをする人へ - Qiita
はじめに 自己紹介 私は日本にAndroidが上陸したAndroid 1.6の時代(2009年頃)からAndroidの開発者としてAndroid7系になった今も(執筆時2017年)Androidエンジニアを続けています。 Androidの歴史をずっと側で見守り続けた私がエンジニア目線で思っている事を述べるので、これからAndroidのデザインをするデザイナーに見て頂きたいです。 ※ この記事の内容は一個人の意見で所属先は一切関係ありません 一番言いたいこと まず、普段iPhoneを使っているデザイナーは最新もしくは1つ前のOSが入ったAndroid端末をメイン端末とまではいかなくても2台持ちにして常用して下さい。 ハッキリ言ってこれが全てです!! 良さ気なUIのアプリを一通り入れて数十分触るだけでは全く意味がありません。 Androidの良さは通知やIntentと呼ばれるアプリ間の密な連携
ニュース系アプリから見る、参考にしたいUIデザインアイデア10個まとめ
ここ数年間でニュースメディアは大変な盛り上がりとなっており、ストーリーテリング（英: Storytelling）と呼ばれる雑誌など出版物のオンライン体験を軸にした、新しい戦略が生まれています。ウェブサイトはリニューアルされ、さまざまなアプリも制作されていることから、ニュースメディアはデザイナーにとってデザインの参考にできる機会にたくさん恵まれています。 この記事では、UIデザイン制作の参考にしたいニュースアプリデザインを集め、各UIのメリットとおすすめポイントをまとめてご紹介します。実際に使われているアプリから、開発中のデザインまでが揃っています。 詳細は以下から。 ニュース系アプリから見る、参考にしたいUIデザインアイデア１０個まとめ Urkanian News Portal Credit: Toma Reznichenko 参考にしたいポイント 通常のニュースメディアでは、コンテンツを
有名iOSアプリのログイン画面画像集 - Qiita
ログイン画面を作る時の参考に。 画像は全て2016年11月22日、23日時点のものです。 Instagram ログイン 登録 パスワード忘れた画面
Google DocsみたいなUIデザインツール「Figma」Sketchから乗り換えるべき？
Chrome上で使えて、リアルタイムの共同編集もできるーーそんなGoogleドキュメントライクな特徴を持つUIデザインツール「Figma」がすごいと評判です。Sketchと比較してみました。 デザイン系のブログをフォローしている人なら、新しいUIデザイン作成ツール「Figma」の話題はもう知っているかもしれません。サンフランシスコのプロダクトデザイナーがFigmaを絶賛して注目されるようになりました。FigmaはSketchの長所を持ち、チームで共同編集が可能で、すべてブラウザー上（技術的に言えばChrome）で作成できます。 とはいえ、Figmaは実際どこまで使えるのか？ Sketchと比べてどうか？ Figmaをワークフローに組み込むべきか？ Figmaを試したので、まとめます。 FigmaとSketchの違い 1. Figmaはブラウザー上で動く（Chromeアプリ） Figmaはブ
ユーザーをうまく誘導しよう！Webデザインで意識したい視線の動き方3パターン
ホームページを制作する際に考慮しなければならないことが「ページの中でもユーザーに見てほしい要素を正しく配置できているか」という点です。 重要な要素が埋もれてしまったり、読み飛ばされてしまったりしてはホームページを制作した意図が伝わらず、思うような成果をあげることは難しいでしょう。 今回は、ユーザーの視線の動きのパターン3つをご紹介します。 パターンをデザインに取り入れて、見やすくかつ成果のでるホームページ制作を行いましょう。 このニュースを読んだあなたにオススメ HTMLとは〜初心者でも分かるホームページの基礎技術〜 Webデザインに役立つ無料のツール・デザイン集まとめ ネットショップのデザインで意識するべき10個のポイント 1.上から下への視線の動き 人の視線の動きで最も自然な視線の動きが「上から下」への移動です。 ホームページにかぎらず本や雑誌なども、縦書きの場合でも横書きの場合でも基
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
Private Presentation
Private content!This content has been marked as private by the uploader.
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
http://www.life-is-bitter.com/entry/ui_checklist
創作にぴったり！異世界の魔法、武器、防具、道具、生き物をテーマにした無料のピクトグラムがなんと495種類も！ | コリス
