デザインに正解はない。だからデザイナーは悩む。 それなのに、クライアントや上司に 「このデザインはどうですか？」 と相談するのはどうしてだろう？この矛盾に気づいているだろうか。 あなたに正解がわからないように、クライアントや上司も正解は知らない。 そもそもデザインだけでなく、このVUCAの時代に答えのある仕事の方がマレだ。 まず、認識を改めよう。あなただけでなく、雲の上の存在のような上司も優秀なクライアントも、誰も彼も答えのないゲームの中で戦っている。 そして答えのないデザインに悩むのではなく、答えのないデザインのルールと戦い方を身につけよう。 デザインのクオリティはプロセスで決まるデザインの案件が来たら、とりあえずギャラリーサイトでサイトを漁ったり競合サイトを調べたりしてないだろうか？ …一番やってはダメな行動だ。コンサルなら肩を叩かれても文句は言えない。 1. 論点を立てるまずやること

こんにちは、シフトブレインでエンジニアとして働いている安田（@_yuheiy）です。 先日、株式会社ボーンデジタルから出版された書籍『Every Layout─モジュラーなレスポンシブデザインを実現するCSS設計論』に、監訳者のひとりとして携わりました。 本書は、CSSにおけるレイアウトをテーマとしていますが、同時に、それをあらゆる環境においても破綻することなく、堅牢に実現するための、CSS全般について言える哲学を追求したような書籍です。レイアウトとはどのようにあるべきで、そしてCSSとしてどのように表現されるべきであるかという態度において、首尾一貫した理論を提示するものです。 このように、筆者独自の意見が強く主張される書籍はCSSの文脈では珍しく思えます。しかし本書の主張は、私自身のかねてからの問題意識とも重なるところが多く、また昨今の業界的な常識にアンチテーゼを唱える重要な問題提起だと

こんにちは。デザインチームの八嶋です。2021年3月22日、SMBCのホームページが大幅にリニューアルされました。このホームページリニューアルは、約5年ぶりの大幅リニューアルでページ数は約1500ページにも及ぶ大プロジェクトでした。このプロジェクトはインハウスデザイナーによるホームページのデザインディレクションとデザインチームが作ったデザインシステムによる連携で作られています。ホームページの役割からUIの設計までコアとなる部分をインハウスデザイナーが設計し、多数のパートナー様にもご協力いただき完成させています。（特にトランスコスモス様、ありがとうございます。） 今回のnoteは、ホームページリニューアルチームの一員でもある八嶋が、デザイナーの大塚とプロジェクトマネージャーの髙橋、そして、デザインシステムを担当したデザイナーの金澤にインタビューをしました！ ホームページリニューアルを通して、

インサイトフォース代表取締役。東証一部上場メーカー子会社で戦略コンサルティング事業の事業部長、東証一部上場コンサルティング会社でブランドコンサルティングのデリバリー統括などを経て、2010年にブランド・マーケティング領域支援に特化した戦略コンサルティングファームのインサイトフォース設立。大手企業を中心にこれまで100社以上の戦略コンサルティングに従事している。著書に『デジタル時代の基礎知識「ブランディング」　「顧客体験」で差がつく時代の新しいルール』（翔泳社）など。東京都生まれ。 マーケティングの仕事と年収のリアル 「マーケティング職」といっても、その仕事はさまざま。どんな会社でどんな職種があるのか、また収入の傾向やキャリアアップのポイントなどについて、書籍『マーケティングの仕事と年収のリアル』の内容をもとに具体的に解説します。そのほか、業界で注目されるマーケターとの対談なども実施。マーケ

日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/

デザイナーを採用したい！という時に・・・インターネット企業において、デザインというのは非常に重要です。エンジニアと同様、とてつもなく大事なクリエイティブの戦略ですし、アプリ時代になり、手触りや使いやすさををあげていくために最前線で戦う人です。 しかし、デザイナーを採用したい！となったときに、デザイン知識がない人がやると、よくギャップが起こりやすいです。僕も、デザイナーではないので、いまいち詳しくわかっておらず、面接で苦労したりしました。 そこで、デザイナーを採用するときの、ギャップについて説明したいと思います。 デザイナーの仕事の分類まず、一言で「デザイナー」といっても、何の仕事をする人か、というのをちゃんと把握しておく必要があります。「そりゃデザインでしょ？」と思うかもしれませんが、その中でもいろいろな性質の仕事をやっていたりするので、整理をする必要があります。 たとえば、弊社Super

こんにちは！　UIデザイナーのmarinです。 2020年10月末にFigma に搭載されたVariants 機能、便利ですね〜！　Figma はこんなことができたらいいのになぁと思うことをどんどん実現してくれるので大好きです。 早速スペースマーケットでもVariants 機能を活用しているので、そもそもVariants 機能とは何か・何が便利なのかという簡単なおさらいと、実際の適用に至るまでを紹介します。 Variants 機能とは？複数のコンポーネントをひとつにまとめる機能です。といっても文章を見てもあんまりピンとこないので、ボタンのコンポーネントの例を出します。 今までは、ボタンのコンポーネントひとつに、状態ごと（hoverとかdisabledとか）の複数のコンポーネントが必要でした。こんなイメージですね。 ボタンの例ですが、DefalutとDisabledの2パターンでもサイズ別に

この記事は SmartHR Advent Calendar 2019 21日目の記事です。こんにちは。デザイナーの@tyoys00です。 初めてAdvent Calendarに参加します。これで私も立派なIT人材です。 UIデザインってなんだろう？突然ですが、デザイナーのみなさんUIデザインしてますか？ してます？ では、UIデザインってなにをデザインすることなのでしょうか？ UIデザインってなんなのでしょう？ 私は何もわかりません。デザイン、何もわからない… 私はこの1年上記のような「UIデザインとはなにを作っていることなのか？」ということばかり考えていた気がします。（そして、気づいたら年末になっていました…）。 結論から言うと、UIデザインとはデータベースやサーバーサイドで実装された構造とフロント側での視覚的な情報構造との対称性を設計することであるという考えに至っています。 この実装の

UX-movは様々なアプリのUIを動画で集めたギャラリーサイトです。

どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。

※過去ブログからの移転です正直なところこの半年ほどの開発を遡るにあたり、要件やワイヤーをもとにUIを組んでみていざエンジニアに実装お願いします！と依頼してからシュッとそのままOKが出ることはあまりありませんでした(最近はどうだろう)。 transitkixさんの「つよいUI」については知っていたのですが、実際にプロダクトを開発していくとこの「つよいUI」であるための視点だけではちょっと抜け漏れがあったりして、考えるべきこと・着目すべき点はたくさんあるなあと実感する毎日です。 幸い、弊社のエンジニア陣は皆UI/UX的な視点も持っているため実装をお願いする前に必ずレビューしてもらうようにしているのですが、ここで抜け落ちているところが出るわ出るわ。今回は「つよいUI」の視点とも被りますがこれまでの開発でエンジニアにダメ出しされた、UIをデザインしていく上で(主に私が)抜け落ちてしまいがちだったポ

「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新鮮さ」の両立を意識したという。 「UIは“わかりやすさ”が何よりも大事で、目立ってはいけないものだと思っていたのですが、アートディレクターからは“新鮮

去年の冬に転職したweb系のプログラマー。 今の会社のwebデザイナーが無能すぎてしんどい。 以下愚痴 1. photoshopでwebデザインすんな！photoshopで作ったpsdのwebデザインを渡されて、フロントエンド担当がHTML/CSSコーディングしてるんだけどどうなのこれ？ なんでphotoshop使うの？webページ作るんでしょ？最初からHTMLで書けよ？ いや分かるよ ラフの段階でphotoshopでササっと書いた方が客と調整しやすいもんな でも最終的にはHTMLで出すんだから、デザイナーがHTML/CSS書いて来いよ それをなんか知らないけど、普段使わねーphotoshop開いてルーラー出して、 「ここと、ここのボックスは10pxだからーmarginを...」 「ここは、webフォントの〇〇を使おう」 とかフロントエンド担当が相談してんのｗ バカなの？死ぬの？ 最初から

この記事では、ウェブデザイン制作で活用したい最新UIインタラクション、アニメーションをまとめてご紹介します。Webやスマホアプリのデザイン参考アイデアとして活用したい、ユニークで素敵なアニメーションを中心に揃えています。 最新ウェブデザインも一緒に確認しておけば、デザイントレンドや人気の動向をうまく掴むことができるでしょう。 Webデザイン独学の参考アイデアに！話題の最新ウェブサイト46個まとめ ウェブ体験を快適にする参考にしたいUIインタラクション、アニメーションまとめ Generative interface Natural AI 自分の気分を音声入力するだけで、もっともふさわしい提案をしてくれるスマホアプリ。まさに未来の世界がもうすぐそこまで来ています。

こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s

グラフィックデザインが苦手。 私の会社の後輩デザイナーもそうだし、UI/UXからキャリアをはじめたジュニアデザイナーからよく聞く言葉です。 私は元々大学でグラフィックデザイン(正確にはコミュニケーションデザイン)を専攻しており、実務としても2年以上グラフィックデザイナーとして経験を積んでいるので言わばグラフィック上がりのUI/UXデザイナーです。そのためグラフィックデザインが苦手ということはありません。 UI/UXデザイナーであったとしても事業会社にいるとちょっとしたイベントのバナーやフライヤーを作ったり、資料の見栄えを良くしたりとグラフィックデザインのスキルが要求されることが多々あるかと思います。そんなときに苦しんでしまうようなデザイナーに向けてグラフィックデザインの上達へのアプローチ方法とトレーニング方法を今回はまとめてみました。 私が全くグラフィックデザインのスキルがなかった頃から今

私が、デザイン学校を卒業して干支が一周回りました。 今になって思えば、良い授業・勉強ばかりだったなと思うのですが、特に役に立ってるなというものを挙げてみたいなと思います。 普通の役に立った情報は結構あると思うので、 今回は意外なもの・底力感があるものを3点ご紹介にしてみました！ この記事は、卒業してすぐの方や、現在学校に通っている方、検討している方などに向けたものとなるかと思います。 ちなみに私は、 桑沢デザイン研究所→国内制作会社→海外制作会社社長（上海）→外資外資クリエイティブディレクター（上海＆シンガポール）→国内総合広告代理店→IT企業→独立 という感じで、そのキャリアの中で役に立ったなという実感のあるものです。 ①エディトリアルデザインの勉強●概要 エディトリアルデザインとは、雑誌のデザインスキルです。 これは、タイポグラフィ、レイアウト、編集の技術が一つになったもので、華やかさ