UIUXデザイングループのグループ長を担当させていただいている小田と申します。 一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。 今回はモノタロウのデザインシステムのお話をしたいと思います。 デザインシステムの始まり これは数年前の話です。 何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。 また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。 サービスの品質を上げるPDCAを早く回す為に土台(図1)を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。 分散していたスタイル: 作成したボタ
はじめに Blender。めっちゃ楽しいです。 仕事が終わって帰ってきてから、ほぼ朝の時間までBlenderにひたすら打ち込んで 休日の大半もBlenderに捧げるような生活をここ3週間くらい続けてきました。 ここまでの学びの整理と、Blender布教のために この記事に概要をまとめたいと思います。 Blenderの世界観 Blenderを始めるにあたって、まず第一にぶち当たる壁として 「3Dソフト特有の概念」があると思います。 他の、3Dソフトを触ったことがある人はすんなり扱えるかもしれませんが、 僕はなかったので、概念理解にちょっと苦戦しました。 Blenderの世界を構成する主な要素として シーン オブジェクト ライト カメラ これらが挙げられます。 シーンとは、 一つのBlenderファイル内に格納されている要素全てを包含する3Dワールドのようなものです。 オブジェクトとは、 一次
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1: Figmaのトークンの名前と値が確認できる Point2: FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3:
パッケージ、MV、スタイリング、ビジュアルデザインなど全方位に高品質なK-POPクリエイティブにおいても軽視されがちなのがウェブ分野だが、その中でも数少ない事例を紹介。 (コミュニティアプリ・ライブ配信・ビハインドなども広義の意味ではウェブコンテンツだが、ここではいわゆる特設サイトについてのみ触れる) * * * NewJeans.krNewJeansの公式サイトはニュースの役割を持たず、カムバックごとに特化した内容にリニューアルされる。特徴的なのは毎回実装される独自のデザインを生成できるジェネレーターで、しかしそのアプローチは常に異なる。 ウェブサイトに限らず、バッグ形態のパッケージデザインやデコ前提のシンプルなペンライトのように、各々のカスタム性を追求することによって逆に連帯感を演出する新しい大衆性がある(学校指定の鞄にキーホルダーで個性を出すやつを、メンバーとファンの間でやってるみた
本書は 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] - 表紙画像に、このコ
この文書では、 レトロゲームを最新の PC やコンソールに移植するような場合に必要となる、 低解像度のドット絵をドット感を残しつつ高解像度ディスプレイに拡大表示する処理についてまとめます。 そして、拡大処理で見落としがちな問題とその解決方法、および改良と高速化について触れます。 この文書では、ごく基本的なバイリニアフィルタによる拡大処理のみを取り扱います。 高解像度化技術周辺や、CRT のスキャンラインや画素の再現は、この文書で取り扱う範囲外なので一切触れません。 また、 話を簡単にするため、拡大結果を sRGB 規格のディスプレイに表示するケースのみを考えます。 筆者はディスプレイの規格が専門分野ではないので、 色の定義などの理解が甘い箇所があるかもしれません。あらかじめご了承ください。 何か間違いがありましたら、ご指摘いただければ幸いです。 ドット絵の滲みを再現したい 当時のドット絵は
ChatGPTやStable Diffusionなどの生成AIが急速に発展し、社会全体が大きく変化しようとしている。 UXデザインのプロセスや、UX自体のあり方も当然革新されていく。 今回はそうした生成AIによってUXがどう変化していくかを、具体的なメソッドや未来洞察といった具体・抽象を行き来しながら話していく。 1. 生成AIを活用したUXデザインプロセス どのようにGenerative AIを活用すれば、UXデザインのプロセスをよりなめらかに、効率的にすることができるのか? 2. 生成AIでUX自体がどう変化するか Generative AIの発展によって、プロダクトにおけるユーザー体験のあり方はどのように変化していくのか? 3. AI時代のデザイナー/PdM生存戦略 AI時代に、デザイナーやプロダクトマネージャーなどの個人はどのように強みを磨いていけばいいのか? ▼ スピーカーTwi
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学
昨今では、顧客理解 / ユーザ理解に取り組む必要性が様々な所で主張されており、一般常識になりつつある。そして「顧客のことを深く理解すれば、良質な仮説を立案できる」という言説が広く信じられており、マーケティング戦略を検討したり顧客体験をデザインするうえでの前提条件となっている。しかし、このような言説は本当に正しいのだろうか。 結論からいえば「顧客を深く理解すれば、良質な仮説を立案できる、という言説は間違っている」というのが本記事の主張である。この間違った言説が広く信じられてしまっていることが、ミクロな視点では「成果に繋がる施策仮説を立案できない」というビジネスパーソンの悩みの解消を阻んでおり、マクロな視点では企業の成長や競争力向上を阻む要因となっているのだ。 そこで本記事では、顧客理解の必要性・重要性を真っ向から否定することを試みる。「顧客を理解すれば、良質な仮説を立案できる」という言説が間
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下2つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった!というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです! 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
はじめに としが明け、2023年になり、2022年を振り帰ったり、今年の目標を立てている頃でしょうか? みなさんは2022年どんな1年でしたか? この記事では、2022年に話題になったWebサイトをまとめて、 みなさんの振り返りや今年の目標や勉強することの参考にしてみてはいかがでしょうか? POLA https://www.pola.co.jp/wecaremore/mothersday/ 母の日に合わせて公開された↑この特設サイトは、スクロールに合わせて、だいぶスムーズに花がアニメーションしていくサイトです。 一回サイトに訪れると、その没入感にサイトから抜け出すタイミングがなくなるでしょう。 Pokémon Online Gallery https://onlinegallery.pokemon.co.jp/ja/ ポケットモンスター スカーレット・バイオレットの発売を記念して公開された
人工知能(AI)は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文(プロンプト)を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは? ✨ 唱える呪文(プロンプト)って何? ✨ 画像を
【総まとめ】2022年に話題になった世界ベストWebデザイン厳選50個 Webデザインに関わる、すべてのクリエイターの参考に 当サイトでは、新しく公開された最新Webサイトデザインを定期的にまとめています。 今回は、2022年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。 配色えらびやレイアウトの参考にぴったりで、今後のデザイン制作の参考にしてみてはいかがでしょう。 【総まとめ】2022年に話題になった世界のベストWebデザイン厳選50個 Drake Related アーティストDrakeの豪邸をオンラインツアーで巡りながら、レアな限定商品や楽曲の購入などできる、新しいEコマース体験ができるウェブサイト。 SeaCat 夢のようなスーパーヨットを、ふんだんなアニメーションとイラストで、インタラクティブに紹介するイタリア発のウェブサイト。 まくらのキタムラ ページス
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く