高品質なスライドのデザインのギャラリーサイト。現役デザイナーが完成度の高いスライドだけをピックアップしているので、営業資料、採用ピッチ資料、プレゼン資料のデザインの参考にご利用ください 。
![スライドデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/64906cdee7bfa8368479a4f9c6aae2272fd729f2/height=288;version=1;width=512/https%3A%2F%2Fdesign-sli.de%2Fwp-content%2Fuploads%2F2023%2F12%2FOGP-1.png)
こんにちは!東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか?ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか? そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
突然ですが、質問です! 以下の文章で、登場人物が実際に声に出して言っている部分と、心の中で思い浮かべている部分はどこでしょうか。 「みんなはね、ずいぶん走ったけれども遅れてしまったよ。ザネリもね、ずいぶん走ったけれども追いつかなかった」と言いました。 ジョバンニは、 (そうだ、ぼくたちはいま、いっしょにさそって出かけたのだ)とおもいながら、 「どこかで待っていようか」と言いました。 青空文庫 宮沢賢治『銀河鉄道の夜』 https://www.aozora.gr.jp/cards/000081/files/43737_19215.html 答えは簡単ですね。 「 」の中の言葉が声に出して言っている部分、( )の中の言葉が心の中で思い浮かべている部分です。 前後の文章からも読み取れると思いますが、括弧の使い分けがされていることで、より分かりやすくなっています。 このように括弧類は主に文章内で会
アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ウワア考えてなかったすみません、今作ります。。」 (なんて自分はポンコツなんだ、、ウウウ) と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください! UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State(空っぽの状態) ・Loading State(ローディング状態) ・Partial State(部分達成状態) ・Error State(エラー状態) ・Ideal State(理想状態) 一つ一つ参考を交えな
本書は 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] - 表紙画像に、このコ
欧文のルール日本人は知らない欧文(主に英語)のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 欧文で「〜」は使わない考えてみると「そりゃそうか」ってなるのがこの「〜」。日本だと 午前10時〜午後7時 というように使用します。便利でわかりやすい符号です。 「〜」は波形という日本の約物これは「波形」というつなぎ符号です。約物(やくもの)という記号の一種。波形の意味は、「…まで」。だから 東京〜大阪まで という表記は間違いです。「東京〜大阪」で「東京から大阪まで」という意味になるからです。波形は、この他に語句の省略や長音を強調するために使う音引き「ー」の代わりに
Photoshopなどのデザインソフトにある「乗算」「スクリーン」「焼き込みカラー」「覆い焼きカラー」など、各描画モードがどのように機能するかを解説します。 それぞれの違いがよく分からない、どんな効果があるのか分からないという人に、これを読めば描画モードでどれを使うか迷うことはなくなります。 Blending Modes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 描画(ブレンディング)モードとは 各描画(ブレンディング)モードについて解説 はじめに 見た目が思い通りになるまで、描画モードをいろいろ試していませんか? 描画モードの種類 この記事を読んでもあまり変わらないかもしれませんが、少なくとも「比較(明)」や「比較(暗)」を使用することはなくなるでしょう
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、?となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない(複数呼び名がある)ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
認知バイアスとは、思考のプロセスにおける系統的な間違いのこと。簡単に言い換えると、思い込み。意思決定や判断を行う際の精神的な近道として機能するが、間違った判断を生み出すこともある。 年齢、性別、文化的背景に関係なく、誰もが認知バイアスの影響を受けていると言われる。 これを理解しておくことは、デザインを生業にする我々にとってはとても重要だと思う。なぜなら、人間である以上は、そこに認知バイアスがあり、それを熟知しておくことで、より適切なデザインをすることができるようになるから。 ユーザーエンゲージメントを向上させる7つの要素 認知バイアスが存在する理由我々の脳は、日々信じられないほどの量の情報を取り込んでいる。同時に、できるだけ思考エネルギーを節約したいとも思っている。そのため、難しい判断を迅速に行うために、一般論や経験則(ヒューリスティックとも呼ばれる)に頼っている。 脳がより効率良く判断を
2021年12月3日に本テキストブックを題材に、デザイン経営の考え方や導入方法、テキストブックの制作秘話などについて語るオンラインイベントが開催されました。下記のリンク先からアーカイブ動画をご覧いただけます。 詳しくはこちら(外部サイト) > 富士通のこれまでの実践から得られたノウハウと、イタリアのミラノ工科大学デザインスクールPOLI.Designの研究成果やフィロソフィーを組み合わせた、デザイン思考のテキストブック「Transformation by Design デジタルトランスフォーメーションに挑戦するデザイン戦略とサービスプランニング」(日本語版・英語版)を公開いたします。このテキストブックはPDFで閲覧可能です。またテキストブック制作の背景や制作チームの想いなど、制作のディレクターを務めた宇多村志伸と高嶋大介に話を聞きましたので、ぜひダウンロードの際に併せてお読みください。
こんにちは。デザインチームの八嶋です。2021年3月22日、SMBCのホームページが大幅にリニューアルされました。このホームページリニューアルは、約5年ぶりの大幅リニューアルでページ数は約1500ページにも及ぶ大プロジェクトでした。このプロジェクトはインハウスデザイナーによるホームページのデザインディレクションとデザインチームが作ったデザインシステムによる連携で作られています。ホームページの役割からUIの設計までコアとなる部分をインハウスデザイナーが設計し、多数のパートナー様にもご協力いただき完成させています。(特にトランスコスモス様、ありがとうございます。) 今回のnoteは、ホームページリニューアルチームの一員でもある八嶋が、デザイナーの大塚とプロジェクトマネージャーの髙橋、そして、デザインシステムを担当したデザイナーの金澤にインタビューをしました! ホームページリニューアルを通して、
デザインを行う際には、感覚ではなく複数のロジックを活用することで、より精度の高いプロダクトを創り出すことができる。 そのプロダクトを人間が利用する場合、ユーザーの視覚や行動心理学などをしっかりと理解し、活用すればデザイナーとしての能力が一段と高まるはず。 今回紹介するのは、複数あるデザインにおける法則のうち、ビートラックスのデザインチームでも頻繁に利用される代表的な10の法則。プロのデザイナーなら、これは押さえておきたい。 デザイナーなら知っておきたいデザインに関する基本の10法則ヤコブの法則ヒックの法則80/20の法則パーキンソンの法則フィッツの法則ミラーの法則テスラーの法則FBMモデルドハティのしきい値3対1の法則ヤコブの法則ユーザービリティーの父であるヤコブ・ニールセンが提唱する法則。一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方(Adobe Illustrator)簡易的な描き方(Vector Draw Tool)ピート・ハインのスーパー楕円 Sou
当サイトでは、Photoshopの新しい機能テクニックをつかった最新チュートリアル、作り方を定期的にまとめて紹介しています。 この記事では、2020年のあいだに公開された、特に確認しておきたいPhotoshopのデザインチュートリアル、つくり方をまとめてご紹介します。 これまで以上に便利になった新しくアップデートされたPhotoshop 2021の新機能はもちろん、ボタンひとつで完成のお手軽写真やアクション、合成テクニックなど、デザイナーが覚えておくと便利な人気のデザインスタイルのつくり方がずらり揃います。 これからPhotoshopを始めてみよう、というひとにもぴったりなテクニックを揃えています。年末の連休をつかって、新しいテクニックを習得してみてはいかがでしょう。 2020年公開のIllustratorチュートリアル、つくり方も以下の記事でまとめています。 【総まとめ】2020年公開の
棒グラフについて「書くときの注意点」「棒グラフの種類」「どういったデータが棒グラフに向いているか」「実際の棒グラフのデザイン」などを画像を使ってわかりやすくまとめました✨ さくっと書きたい人は「棒グラフの種類」から読むことをおすすめします。いろいろな棒グラフのデザインがあるので、気に入ったグラフをまねして使ってね。 しっかり考えて書きたい人は、「棒グラフを書くときの注意点」を読めば、伝わる棒グラフの作り方がわかるとおもいます💡 棒グラフを書くときの注意点・棒グラフは使いやすい無難なグラフ シンプルで正確なグラフだけを考えるなら、棒グラフは簡単なグラフです🥇 エクセルの初期設定でもフォントを変えれば無難な棒グラフは簡単に作成できます。 円グラフは真面目に作ってもわかりにくいグラフはできるが、棒グラフは意図的に見る人を欺こうとしない限りわかりにくいグラフにはなりにくいです。 ただし、完成し
円グラフについて「書くときの注意点」「円グラフの種類」「どういったデータが円グラフに向いているか」「実際の円グラフのデザイン」などを画像を使ってわかりやすくまとめました✨ note公式Twitterでも紹介された人気記事なので、よかったら見てね😊 さくっと書きたい人は「円グラフの種類」から読むことをおすすめします。いろいろな円グラフのデザインがあるので、気に入ったグラフを真似して使ってね。 しっかり考えて書きたい人は、「円グラフを書くときの注意点」を読めば、見やすい円グラフの作り方がわかるとおもいます。 円グラフを書くときの注意点・本当に円グラフでいいの? 円グラフはわかりにくくなりやすいグラフです。 要素が3つ以上ある場合は、棒グラフを使ってみるのもおすすめです🙆 「円グラフは使うな」という方もいますが、私は使い方さえ間違えなければ円グラフも素晴らしい表現方法だと思うので、簡単にわか
2020 年に入り、メルカリ US ではプロジェクトの担当 PDM を検討する際に「UIUX に大きな変更が入るならこの人」「関係者マネジメントが重要ならあの人」「テクニカルな知識が要求されるならこの人」といった具合に、プロダクトマネージャーそれぞれの特性・得意分野を考慮したうえで決定する傾向が以前にも増して強くなりました。 その結果、自分(フリッツ と申します、こんにちは)の場合は UIUX 改善を中心としたプロジェクトが相当に増え、並行して 3-4 名の UIUX デザイナーとそれぞれのプロジェクトについて議論することが毎日の風景となりました(めっちゃくちゃ楽しい)。 こうした状況下にあって、あらためて デザイナーと UIUX について議論・もしくはフィードバックをする際に気をつけている・気をつけたいことについて前後編にわけて振り返りをしたので共有してみたいと思います: ・前編(この記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く