SmartHRに頻出する、表形式で一覧表示するUIのパターンまとめています。 SmartHRでは、表形式で一覧表示するUIを「よくあるテーブル」と呼びます。 OOUIにおけるコレクションと、コレクションに関連するアクションやフォームをまとめた総称を指します。 構成よくあるテーブルは、次の要素で構成されています。必須項目以外は任意の表示項目です。 テーブルオブジェクト名（必須）オブジェクトの情報オブジェクトの操作タイトルエリアテーブル操作エリア一時操作エリア 1. テーブルよくあるテーブルは、多くの場合「1項目1行の1次元リスト」のテーブルを含みます。 オブジェクト名オブジェクトの名前を指します。行を識別するために必須要素として設定します。 移動リンクのスタイルオブジェクトの詳細ビューへ移動する場合、オブジェクト名にリンクを設定します。 テキストリンクによる移動は「オブジェクトの操作」にはあ

これは何 「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア」カレンダー8日目の記事です！ エンジニアと一緒に仕事をすることが多いため、少しでも話が通じるようになろう……と思って勉強をしてきました。 私自身がコードをしっかり理解できるのは難しいにせよ、リテラシーとしては身につけておかねばといった気持ちです。 現状だと「デザイナー相手にこういう話が通じると助かるよ」とは言ってもらえる程度で、他の人の参考になればと思い記事を投稿します。 対象読者 「デザイナーのリテラシーがもう少し高かったら助かるなあ」と思っているエンジニア この記事をデザイナーに紹介してもらえれば何かのきっかけになるかもしれません エンジニアと話したいデザイナー この記事の内容を真似れば多少は理解が深まると思います ただし効率の良い順番かというと怪しいのでそこはご了承ください 要は、この記事に書いてある

開発部で週1で新しいことをやってみる『Dev実験室』の取り組み AtomicDesignを知る デザインシステムを知る CSS設計どうするのが良い？ って話をする

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

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をデザインしていく上で(主に私が)抜け落ちてしまいがちだったポ

世界中の人の心を掴んだ「スプラトゥーン」、文字や細かなパーツをみただけで「スプラトゥーン」とわかる作り込まれた世界観。そのUIデザインプロセスとは？ 「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。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ヘビーユーザーである。いや、だった。 わざわざ過去形で語り直したのは最近は投稿オンリーで以前ほど検索を使ってないからだ。 というかPCで検索や投稿しようとすると、とても使いにくく見辛いサイトになってしまった。 pixiv歴は何年になるのか。 いちいち数えてないがおそらく2008年頃、できた当初から使っていたような気がする。 私は趣味の字書きでpixivに一次創作の小説を投稿している。でも検索は主にイラストをさがすときに使っている。 web小説を書いていながらweb小説をあまり読まない、というのも関係している。 面白いweb小説がたくさんあるのは知っているが、自分が好きでまだ読めてない商業作家の本がたくさん溢れているので、限られた人生まずはそちらを優先したい。 ともあれそんな訳で、pixivには十数年大変お世話になった。 旧世代型の腐女子ならおわかりいただけるだろうが、pixi

こんにちは。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企業→独立 という感じで、そのキャリアの中で役に立ったなという実感のあるものです。 ①エディトリアルデザインの勉強●概要 エディトリアルデザインとは、雑誌のデザインスキルです。 これは、タイポグラフィ、レイアウト、編集の技術が一つになったもので、華やかさ

2月から、実践型デザイン学習サービス『Cocoda!』で、毎日1つ出されるお題に沿ってアプリUIなどのデザインをするDaily Cocoda!にチャレンジしています。（今日までで25日連続ー！） Webデザインも昨年からやっているレベルなのですが、UIデザインはまたそれとは結構別物で、初心者ながら見よう見まねで頑張っています。 さてさて、私の練習作を見てくださった方からツイッターで「スマホの枠とかアイコンはどこで手に入れられるの？」という質問をもらったりしたので、今回は私がよくお世話になっているツールやサイトをまとめようと思います。 最後のデザインツール以外は全て無料です。 追記：この記事を書いた後にデザイナーになって1年半が経ち、アップデート版のような記事を書きました↓ 主に海外のサイトで無料で配布されているので、英語で 「"mockup" + "iphone" + "(sketchやp

こんにちは、デザイン部デザイン戦略チームでプリンシパルデザイナーをしている咲 @satosio です。 2020年4月にGMOインターネットグループの新卒入社パートナーを対象に「デザイン思考について」約1時間の講義を行いました。この記事ではそこで使用したスライドをもとに「デザイナーにとってデザイン思考とはなにか」を説明していきます。 「デザイン思考」はデザイナーに限った話ではないのですが、「デザイン思考（笑）」というように、言葉自体をなんとなく毛嫌いしてしまっているデザイナーに「デザイン思考」と呼ばれているものの正体はなにかを説明することが本記事の目的です。 結論 概要 共感とはSympathyではなくEmpathy 共感からインサイトを得ることで自分ごと化する デザインとは意思決定の積み重ね 意思決定は「仮説推論」に基づいている デザインの思考法とはフレーミングを用いた仮説推論 デザイン

先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleのAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか？継続的にバージョンア

この記事は一休.com アドベントカレンダーの20日目の記事です。 qiita.com はじめまして、宿泊サービスのUIデザインを担当しています河村です。 一休のデザイナーは部署ごとに在籍チームが異なります。私は長い間、営業企画部デザイナーとして働いていましたが、今年4月よりプロダクト開発部UIデザイナーとして働いています。（本ブログでは、前者をWebデザイナーとします） WebデザイナーとUIデザイナーをやってみて、多くのことが「違った」ので、どんな違いなのかをお話させていただきます。 目次 １） 仕事内容の違い ２） 必要なスキルの違い ３） 仕事の進め方の違い ４） まとめ 仕事内容の違い ビジュアル表現に特化 一休のWebデザイナーの主な業務内容は、トップページなどの更新作業、施設紹介ページ、特集・企画販促ページ、メールマガジン等の作成です。ページ全体のビジュアルを管理しているので

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し

ウェブページを見ている人の目線の動きをトラッキングした2006年の調査で「インターネットで公開されている記事の文章を端から端まできっちり読む人は極めてまれ」ということが示されました。それから10年以上が経過し、インターネットは大きく変化しましたが、人のウェブページの見方は変化したのか？ということで、新たな調査結果が公開されています。過去にはあまり見られなかったウェブサイトのレイアウトや目線パターンの存在が明かされており、インターネット上で物を書いたり公開したりする人に非常に役立つ内容となっています。 How People Read Online: New and Old Findings https://www.nngroup.com/articles/how-people-read-online/ 2006年、ウェブサイトのユーザービリティについて調査を行うニールセン・ノーマン・グループ