一体どこからインスピレーションを受けるの？ 前もって知っておけば良かったデザインサイト10選！｜Choi
こんにちは、デザイナーのchoiです。 皆さんは作業を始める時、何から始めれば良いのか分からなくて困ったことがありせんか？ ピカソはこういう言葉を残しました。 腕がよいアーティストはコピーするが、偉大なアーティストは（インスピレーションを）盗む。（Good artists copy, the geniuses steal.）つまり、優れた作品を創造するためには、たくさんの作品からインスピレーションを受けることが最も大切だと思います。 しかし、どこからインスピレーションを受け、自分の作品に活かせばいいのかいつも悩んでしまいます。 そこで私は、インスピレーションを盗みやすい、新鮮でクオリティの高いサイトを共有したいと思います。 1.Pentagram 世界中のデザイナーが目指すPentagramはロンドン、ニューヨーク、オースティン、ベルリンの4つの支部で、25人のパートナーが運営する世界最大
K-POPのデザイン16: ウェブにナラティブを取り戻す｜Simon says
パッケージ、MV、スタイリング、ビジュアルデザインなど全方位に高品質なK-POPクリエイティブにおいても軽視されがちなのがウェブ分野だが、その中でも数少ない事例を紹介。 （コミュニティアプリ・ライブ配信・ビハインドなども広義の意味ではウェブコンテンツだが、ここではいわゆる特設サイトについてのみ触れる） ＊ ＊ ＊ NewJeans.krNewJeansの公式サイトはニュースの役割を持たず、カムバックごとに特化した内容にリニューアルされる。特徴的なのは毎回実装される独自のデザインを生成できるジェネレーターで、しかしそのアプローチは常に異なる。 ウェブサイトに限らず、バッグ形態のパッケージデザインやデコ前提のシンプルなペンライトのように、各々のカスタム性を追求することによって逆に連帯感を演出する新しい大衆性がある（学校指定の鞄にキーホルダーで個性を出すやつを、メンバーとファンの間でやってるみた
Skill Area - Pepabo Design
スキルエリアシステム ペパボでは、個人のスキル向上のためのガイドを目的とし、デザインに必要なスキルの領域を次のように定め、人材育成や目標設定のために活用しています。 Expert Skill Areas 優先度の高い専門性のスキルエリア Communication Design ブランドを正しく活用し、成長させるための、さまざまなレベルのコミュニケーションのデザイン、またはブランド自体のデザインを行う。 知識・スキル ブランド価値の形成と活用について理解し、それらを達成するためのコミュニケーション要件を定める。 誰に、どんなメッセージを届け、どのような認知・行動の変化を起こすかを定める。 テキスト、画像、動画、ストーリー、などさまざまな手法とそれを伝えるメディアの選定、メディアに応じた手法の最適化をおこない、アウトプットとして提供する。 タッチポイント、流入、メディアの選定とコンテンツの設
「直感的なインターフェイス」の正体を考える｜Takumi Tonosaki
デジタルプロダクトデザイナーとして、現時点で自分が考えている「直感的なインターフェイス」のポイントをまとめたいと思います。普段無意識に使えているからこそ、言語化できていないことも多いと思うので参考になれば幸いです。 直感的なインターフェイスの定義直感的なインターフェイス＝無意識下でも使えるインターフェイス ※「感動する、情緒的な価値を感じる」などのデザインは今回は「直感的なインターフェイス」のスコープからは外したいと思います。 1.普遍性直感的に使えるデザインにとって「普遍性」はとても大事な思想です。ここでいう「普遍性」とは奇をてらわずに「当たり前である」、「一般的である」と感じるデザインのことです。 ◎スキューモフィズムこの普遍性の考え方の一つに「スキューモフィズム」があります。スキューモフィズムとは、すでに現実世界にあるものを模倣してわかりやすく伝える手法です。 スキューモフィズムで有
Figma for VS Code - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Streamline your design to code workflow with Figma for VS Code Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor. Improve developer productivity by eliminating the context switching and busy work
UXデザインを超えてゆけ〜ユーザーインタビュー設計をゴリッと〜｜しょーてぃー/ Experience & Prompt Designer
俺の屍を越えてゆけみたいになってもうた ども。しょーてぃーです。 本記事は守・破・離の「守」です。 学んだことを、 まずはかんたんなことからシェアする記事です。 プロンプトも全てコピペできるので、 お試しあれ。 🚸 なおこの記事企画はPVやいいね数をみて 需要がなければすぐやめて、 また一人でAIと山奥にこもる予定です笑 （仮説実行検証！） 概要所要時間: 5分 完成する成果物： 1.インタビューシートの概要 2.インタビューフロー(添付画像) インタビューをしたほうがいいと言われて、 頭ではわかっているがどのように設計したり 具体的にどんな質問を投げかければいいのか 困ったことはないだろうか？ リサーチを何百回 やってきた私もまだある。 本当に 設計は大変である。 そしたらAIと一緒に作ればいい。 「え〜、AIって難しそう！理系っぽい！」 いや、安心してくれ。 私は一切コードがかけない
ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話｜Mercari Design Blog
ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話 こんにちは、メルカリDesign Systemの立ち上げと運用を担当したデザイナーのtottieです。 この記事では、メルカリの抱えていたデザイン上の課題をDesign Systemの導入で改善したお話をご紹介いたします。 なぜDesign Systemを導入したの？Design Systemを導入した理由は、大きく分けて２つあります。 １つめは、開発における課題です。 導入を決定した当時（2018年）、メルカリはスタートアップから急成長したサービスだったため、開発チームは様々な課題を抱えていました。 サービスを改修したくても、複雑に絡み合ったコードのためアップデートが難しい状況になってきた。 急激なチームメンバーの増加にあたり、分担して作業するための土台の整備が間に合わなくなっ
Figmaを活用し、職種を超えて全員でデザインするための工夫
本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「Figmaを活用し、職種を超えて全員でデザインするための工夫」についてです。 こんにちは！SmartBankでデザイナーをしている福嶋（putchom）です。 2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった新ジャンルのサービス「家計簿プリカ」を運営しているのですが、チームメンバー全員でサービスをデザインできるように、デザインを透明化し目線を揃えた上で有意義な議論ができるようにしています。 第6回ではプロトタイピングや詳細
"松屋の食券機UIがわかりにくい"ツイートからおよそ2週間で改善の兆しが見えて好評価「こういうの大事」
お客さんからのフィードバックを受けてさっそく改善してる！その後のこともちゃんと話題にして修正に踏み切った人を評価したいな～と思ったのでまとめました。
伝わりやすく使いやすいシステムアイコンができるまで｜東芝 UIデザイン
こんにちは、東芝のUIデザイン担当の池田Rです。 PCやスマホを使っていると「ショッピングカート」や「サムアップ」「虫メガネ」など様々なアイコンを目にします。普段意識することはありませんが、実はこのアイコン、テキスト無しでユーザーに情報を伝えることができる重要なアイテムです。 この記事では、そんなアイコンのデザイン検討から完成までのお話をご紹介します。 アイコンには、アプリケーションを起動するランチャーアイコン、メニューの補足やボタンの役割を果たすシステムアイコンの大きく2種類があります。ここでは東芝の様々なアプリケーションで使われるシステムアイコンに絞ってお話します。 １．まずは手書きで「メッセージする」のアイコンのモチーフは“吹き出し”。「ロックする」のモチーフは“南京錠”といったように、まずは使用用途ごとにモチーフを考えます。システムアイコンは誰にでも正しく意味を認識してもらう必要が
UI/UXがイケてる！おすすめスマホアプリ - 第1回 Twitter - MdN Design Interactive
Amebaのクリエイティブディレクターが徹底考察！ UI/UXがイケてる！おすすめスマホアプリ 第1回 Twitter 2014年12月11日 TEXT：佐藤洋介（株式会社サイバーエージェント） より良いユーザー体験を提供するうえで、スマホアプリにおけるUIの工夫やユーザーの心的高価を考慮したデザインなどを、サービスの機能ごとに紹介していく本連載。第1回目ではTwitterの公式アプリを取り上げ、使い勝手とインタラクションを考察していく。 Twitter iOS版 https://itunes.apple.com/jp/app/twitter/id333903271?mt=8 Android版 https://play.google.com/store/apps/details?id=com.twitter.android&hl=ja OSによるユーザー特性を考慮した最適なレイアウトとは？
生き続けるデザインシステムの実現に向けたデザイナーの取り組み｜Goodpatch Blog グッドパッチブログ
昨今、「デザインシステム」という手法を目にする機会が増えましたよね。 多くのWebアプリケーションやモバイルアプリケーションでデザインシステムが設計されるようになり、最近ではデジタル庁のデザインシステムも話題になりました。 デザインシステムは、設計よりも浸透に時間がかかる点において難しさがあると私は考えます。自社事業でももちろんその難しさはありますが、クライアントワークは特に「納品」という段階が最後に存在することで難易度が跳ね上がるように思います。クライアントワークにおいて、どのようにデザインシステムと向き合えば良いのでしょうか。 例えば、とりあえず「デザインシステム」らしきものを作っても、それは「デザインガイドラインの納品」としてしか機能しない場合が多くあるように感じます。ただ、クライアントワークだからと諦めずに本気で取り組めば「デザインシステムを改善可能な形で納品する」ことは可能なので
最速でゆっくり Figma最新機能紹介 〜Section編 GroupやFrameとの違いとは〜 | さくらのナレッジ
Group, Frame, Sectionの挙動の違いを学ぼう この項では、紛らわしいGroup, Frame, Sectionの違いについて整理していきましょう。まずはGroupの挙動を確認します。Groupは先に述べたとおり、グルーピングした要素の一括処理を担っています。 Groupの機能と役割 先程、Groupには２つの機能があるとご紹介しました。その１つ目は子要素のプロパティ一括変更です。以下の動画では、Groupレイヤーを選択することで、子要素に対して一括してプロパティ変更を行っています。 Groupで子要素のプロパティを一括で変更している様子 2つ目の機能はGroupレイヤー自身へのプロパティ適用による子要素への間接的なデザイン適用です。GroupレイヤーのLayerプロパティを変更して透明度を変更したり、Effectsプロパティを変更することで子要素のレイヤーに一括でドロップ
伝わる文章 | 基本要素 | SmartHR Design System
相手に誠実に、わかりやすい文章を書くための心がけをまとめました。 どういう思考プロセスからどんな表現が生まれるのか、参考として実例を紹介しています。実際に読み比べ、SmartHRの従業員として何かを伝えようとするときの、参考にしてください。 伝わる文章のガイドライン何を伝えるかによって、必要な情報の量や説明の粒度は異なります。 情報が不足していたり、逆に情報が多すぎたりすると、読者が意図を読み取れないことがあります。 読み手となる相手の状況（読む場面、事前知識など）を踏まえ、言葉にする内容や表現を厳選することが大切です。 目的に合わせて情報を取捨選択する読者の目線に立ち、コンテンツの目的に合わせて情報を取捨選択しましょう。 実例1：法律や業務に関わる記事目的業務に関係する「厚生年金保険」について正確に知りたいと思っている人に、わかりやすく内容を伝える。 Before日本の年金制度は、全国民
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
デザインってどう教えるの？元・任天堂デザイナー前田さんから学ぶ効果的なフィードバックとは
デザインをする上で避けては通れないのが制作物へのフィードバック。自身が受ける以外にも同僚や部下のデザインに対して言う側に回る事も多く発生するかと思います。 そこで痛感するが教える事の難しさ。的確なアドバイスをしたつもりが、意図しない仕上がりや進展がないといった事が起こる場合もあり、下手したら自分がデザインするよりも難しいのでは？と感じているのは私だけではないはず。 そんな時に出会ったのが著者、前田高志さんの「鬼フィードバック」という本。デザインの完成に至るまで前田さんとデザイナー達によるフィードバックのやり取りを見ていく内容になっておりますが、前田さんの発言や切り返し方に着目して見ると、教える側の注意点や効果的なプロセスなどのヒントを多く知ることができました。 そこで今回は私なりに気づいた点をまとめてみました。受ける側の目線や全体を通したやり取りが気になった方はぜひ書籍も見てみてください。
安全安心にソフトウェア開発を行うためのDesign Doc導入ガイド｜面川泰明
みなさん、コードを書く前に設計書を書きますか？ 書くか書かないかは人それぞれだと思いますが、「設計」というプロセス自体は意識的であれ無意識的であれエンジニアであれば全員やっていることだと思います。 今回は設計プロセスの改善という文脈で私たちがDesign Docという仕組みを導入したことについて共有しようと思います。もし同じような状況を経験している人がいたら参考になれば幸いです。 導入の背景まずは導入するに至った状況からお話します。 私たちのサービスは、利用していただくユーザーの数が増加しています。それに伴って品質のハードルも上がってきました。サービスに障害が発生するとユーザーさんに大きな損害を出してしまうことになるからです。そこで今まで以上に安全にサービスを開発できる仕組みづくりが必要になりました。ですが、実現のためには大きく2つの課題がありました。 課題1. 開発スピードが徐々に鈍化し
【増枠】Design System Build #01 -デザインシステム構築の様々なアプローチ- (2022/08/23 19:30〜)
2022/08/04 50→100→200→250→300→350→400→450→500名に増枠しました！ ZOOM配信の上限人数の関係で、最後の増枠になります。これから申し込みくださる方は「キャンセル待ち」になります。 RAKSUL主催のデザインシステム勉強会【Design System Build 】を初開催します！ 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」は、開発することでブレなく一貫したユーザー体験を提供できたり、デザイナー・エンジニアの開発を効率化することができたりと、様々なメリットがあります。 ただ、デザインシステムは一度作って終わりではなく、運用しながらプロダクトの成長に合わせてアップデート・構築していくことが重要です。その構築していく過程での開発者たちの様々な取り組みや技術的なチャレンジ、失敗事例や成功事例などを、今回イベントに出演くだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セキュリティとデザイン
Bot Verification
