Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spacing in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるスペースの種類 CSS GridのGap（溝） CSS FlexboxのGap（溝） CSSのポジション CSSのプロジェクトで使用するスペースの実装テクニック スペーサーのコンポーネント CSSの数学関数: Min(), Max(), Clamp() はじめに 2つ以上の要素

Palette Listは2色を選択するだけで関連するカラーパレットを1万以上提案してくれるカラーアプリです 用意された12色から選択すれば自動生成されます。パレットはSVGやSASS、CSSなどでダウンロード出来るようになります 利用の際はユーザー登録などは不要で無料で利用可能です。色の選定に悩んだ時のインスピレーション向上に如何でしょうか。 Palette List

こんにちは、Spinnersの元山@kudakurageです。 ここ最近はデジタルプロダクトのデザインばかりしているわけですが、仕事をし始めた頃には印刷物を始めとした物理的なもののグラフィックデザインなどもよくしていました。 これも今のような仕事をし始めて１年目にやった仕事ですが、限られたものの中で制限のある中でアレコレと考えたり工夫したりしながらやった楽しかった思い出です。 （ラベルだけじゃなくて、商品写真の撮影やポスターを作ったり全部やって楽しかった！） ちなみにこのお酒は数量限定で生産した梅酒なんですが、バーで飲んでてもおかしくない大人の梅酒を目指して、シェリー酒の樽を使って香り付けしたりしていて、アルコール度数高めなのに飲みやすいというかなりやばいお酒でした。 （今考えてもあれ以上に美味しい梅酒は個人的にありません） 今でも名刺など簡単なちょっとしたものは作ることがよくありますが、

米Adobe Systemsが色生成（カラージェネレーター）技術「Leonardo」をオープンソースとして公開している。ターゲットとするコントラスト比をベースに適応的カラーパレットを作成できるという。 LeonardoはWebサイトや各種アプリケーションに向けたカラーパレットを容易に生成できるツール。Adobeのデザインシステム「Spectrum」の色をベースとし、JavaScriptモジュールとインターフェイスで構成される。 d3-colorを使って構築しており、World Wide Web Consortium（W3C）のWeb Accessibility Initiative（WAI）のウェブアクセシビリティ標準であるWeb Content Accessibility Guidelines（WCAG）をサポートする。WCAGが定義する最小コントラスト比などのアクセシビリティ基準を満た

カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS

高速道路使う様になってからずっとETC通行だったんで一般レーンがこんな事になっていようとは…。 デザイン変更までの過渡期なのか要望詰め合わせてたらもうどうにでもな～れ～になったのかはともかくとして、誰か改めて内部設計と共にリデザしてあげて～と思いました。

#dist31 なぜダメなデザインが世に溢れているのでしょうか。優れた才能をもつデザイナーがたくさんいるにも関わらず、壊れたデザインは増え続けています。Web サイトやアプリが人々の生活に欠かせない存在になったことで、私たちが世に出すダメなデザインが行動や思考に悪影響を及ぼすようになりました。 ダメなデザインの原因はデザイナーのスキルが原因なのかというと、そんなことはありません。では、何なのか。ダメなデザインに対して私たちが何をしていくべきなのか紹介します。一緒にデザインの仕事について考えてみませんか？

デザイナーがコーディングできるべきかという議論がSNS上で白熱していますが個人的にはあまり興味がなく、コーディング経験の有無に関係なくWebに適したデザインデータを作ってもらえたらあとはフロントエンドの領分であると思っています。 とはいえ、Webに適したデザインデータをつくれないデザイナーが多いのでああいった議論が白熱するのではないかとも思っています。 Webに適していないデザインデータとはどういったものかというと、古くから言われているものではPhotoshopの『乗算』を使うとCSSで表現できないためダメというものがあったりします。 CSSでもmix-blend-modeという機能で対応できるけどブラウザの対応状況を鑑みるに、よほどの理由がないかぎりPhotoshopの『乗算』を使っていはいけないのが今の現実です。 参考：mix-blend-mode - CSS: カスケーディングスタイ

著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5

「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があって、どういう流れで作っているか」をまとめてみたいと思います。 というのも、いろいろな方から「何から手を付けていいのか…」「デザインが上手くまとまらない」「デザイナーが社内外注みたいになってしまって…」みたいな話をよく聞きまして。 そのアンサーになるかは分かりませんが、自分の場合はこういうフローで、こういうことを意識してますよ。というのを書いてみたいと思います。 もちろん組織や人によってやり方は様々だと思いますので、こんな風にやってる人もいるんだ、

福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ

この記事は小説同人誌向けの話をしています。 ビジネス文書や商業書籍・商業デザインの話はしていません あまりにもちょこちょこ小説同人誌の本文にMS明朝を使うことの是非/可否の話が上がって来るので、論争に終止符を打つためにこの記事を書きます。 まさかフォント単体記事を書くことになるとは思わなかったぞ。 しかしそれくらいもう何度も見る話題なんです。 そして物凄い勢いで論旨がズレていく内容なんです。 というわけで、MS明朝について、そして小説同人誌の本文にMS明朝を使うことについてお話したいと思います。 結論「MS明朝は使っていい」 小説同人誌の本文にMS明朝を「使っても良いのか悪いのか」、つまり使用可否の話だけ知りたい人はこれで終わりです。 MS明朝は小説同人誌に使っていい。 もうちょっと言います。 使って「いい」とか「ダメ」どころか、「Wordデータ（doc、docx）で入稿する人はMS明朝で

一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。 無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 無効状態のボタンをグレーアウトにしない理由 無効状態のボタンをグレーアウトにしない理由 ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも

こんにちは、デザイナーの花ちゃんです！ 自社デザインチームで働いています。 LIGに入社してから作成したLIGブログのアイキャッチは300枚を超えました！ 私がアイキャッチを作成する上で最初の難関だったもの…… それは……文字の装飾！！ 前職ではスマホゲームのUI/UXを担当していました。ゲーム内イベントのキービジュアルやバナーを作成する際は、世界観にあったフォントがある程度決まっていたので、その中から合ったものを選択していたのですが……ブログのアイキャッチとなると、毎回記事の内容、書き手のキャラクターによってテイストや組み合わせを変えなくてはなりません。 圧倒的に引き出しが足りない……！ ということで、今回は文字装飾の基本のパターンについて、LIGブログのアイキャッチを参考例に挙げながらまとめてみることにしました！ 現場で活かせるWebデザインを勉強するなら…… Webデザインを徹底的に

こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ

この記事は2020/04/22に最新情報へ更新！！ こんちはっす！脳内アーティストSHUN INANUMAです！ デザイナーとして制作したり、デザインのレッスンしたりしている私ですが、、、 関連記事：全国対応！短期超集中！スカイプでデザインレッスンやってます！ ちょっと操作方法の知っているデザイン初心者にお伝えしたいことがございまぁす！ ちょっと操作を知っているあなたが作ったデザインは、、、 ドヤ顔で作っているデザインは、、、 めちゃくそハイパーてんこ盛りダセェ！！！！！！！！！ もはや怒り。デザインへの冒涜。からの微かな光。希望。救世主現る。 俺だ。 あ、ちなみにデザインのポイントを解説するインスタグラムを運営しているのでこちらも勉強になるはず！(毎日投稿してます！)

JISのピクトグラム（図形）は看板や標識などをデザインする人たちには馴染み深いものです。 上の図などは誰もが目にしたことがあるでしょう。 JISのピクトグラムをそのまま使っていないにしても、参考にしているデザイナーも多いと思います。 この図はJIS（日本工業規格）という団体がつくっており、より多くの人へわかりやすく情報を伝えることを目的にデザインされています。 そのピクトグラムの色が、今年2018年4月に改定されました。http://www.meti.go.jp/press/2018/04/20180420006/20180420006-2.pdf 改定目的は下記の通りです。 今回の改正では、（中略）世界に先駆けて、一般の人だけでなく多様な色覚を持つ人だれもが識別できる色を選定し、規格に採り入れました。 信号機に代表されるように、色は情報を伝えるための重要な要素の一つです。海外にいったとき

受け身のままでは後退する 長くキャリアを積んだとしても、時に「デザインとは？」という疑問が頭に浮かび上がります。様々な定義がありますし、文脈や状況に応じて正解といえるデザインが変わると思います。私が携わっている web サイトやアプリケーション（デジタルプロダクト）という観点からデザインを捉えると「デザインは交渉すること」だと思っています。 ユーザーの立場・視点を想像して、質の高いプロダクトをデザインしたいと考えるのは良いですが、その想いをそのまま周りに伝えても理解されません。デザイナーが考える「質」は、その職域に携わる人独特の視点であることは多々ありますし、技術制約やビジネスゴールを考慮するとコスト高という場合もあります。 だから諦めましょう … ではないからこそ交渉する必要があります。デザイナーは与えられた課題に対して解決案を作るといった受け身の仕事になりやすいことから、指示・注文・提