Affinity用スウォッチとグラデーションの配布

Affinityシリーズの不満点に、デフォルトで搭載されてるスウォッチとグラデーションの少なさであります。インストール直後は「グレー」「カラー」「グラデーション」のスウォッチと、印刷用途のためにPANTONEカラーが実装されてますが。はっきり言ってデフォルトはショボい。

先日Windows 11を入れるべくクリーンインストールしたら、今まで積み重ねたスウォッチとグラデーションのバックアップを取り忘れ、データを消し飛ばしてしまいました。チクショー!!😭

良い機会なので、2021年現代の主要なデザインガイドラインを元にスウォッチ(カラーパレット)を作り直し、グラデーションも今時使いそうなものを組み直したので、ここに公開します。タイトルではAffinity用と書いてますが、Adobe用とGIMP用のスウォッチ・グラデーションファイルも同梱しています。

ダウンロード

全部のファイルをZIPで固めておいたので、上記リンクからダウンロードしてください。作ったファイル群はマァマァのボリュームがあるのですが、個別のファイルについてはいつかデザインガイドライン毎に詳解記事を書こうと思ってます。

特定の個別ファイルだけ欲しいという方は、GoogleDriveにディレクトリ構造ごとファイルを置いてるので、そこから指定のファイルをダウンロードしてください。

内容物

• グラデーション

  • オリジナル (……と言って良いか分からないけれど、Photoshop2020標準搭載グラデーションを元に加筆修正したグラデーションセット)(196色)

• スウォッチ

  • 印刷用

    • DICカラーパレット(2638色)

  • フレームワーク系

    • Bootstrap4 カラーパレット(14色)
    • Bootstrap5 カラーパレット(118色)
    • Microsoft Fluent UI および Office 365用カラーパレット(332色)

  • OS系

    • Apple社カラーパレット(iOS、macOS、watchOS対応) (36色)
    • Google社マテリアルデザインカラーパレット(AndroidOS)(273色)

  • 政府系カラーパレット

    • イギリス政府カラーパレット(33色)
    • アメリカ合衆国政府カラーパレット(460色)
    • エストニア政府カラーパレット(36色)

  • 企業系カラーパレット

    • Atlassian社カラーパレット(61色)
    • GitLab社カラーパレット(135色)
    • Mozillaコミュニティカラーパレット(135色)

  • その他

    • Photoshop2022デフォルトカラーパレット(115色)

対応ソフトウェアとファイル

以下のファイル形式を梱包しており、Affinityシリーズ・Adobeシリーズ・GIMPに対応したファイルを配布しています。

• afpaletteファイル(Affinity系)
• aseファイル(Adobe社系)
• gplファイル(GIMP)

僕はAffinityシリーズを使うので、afpalette形式を用意しました。でも、ほとんどのグラフィック系ソフトウェアはaseファイルを読み込みますので、お使いのグラフィックソフトでとりあえずaseファイルを読み込ませれば良いでしょう。GIMP用ファイルがあるのは、色変換の中間ファイルを生成するときに便利だったので梱包しておきました。

※aseファイル……Adobe Swatch Exchangeファイル。Adobe社が開発した色情報を様々なソフトウェアでやりとりするための形式

スウォッチやグラデーションのインストール方法

AffinityDesigner、AffinityPhoto、AffinityPublisher

グラデーション

Photoshop2020以降に実装されているデフォルトのグラデーション群をAffinityシリーズに移植し、修正&追加を行いました。

そもそもこのようなシンプルなグラデーションは全部自作しても良かったのですが、Photoshop2020標準搭載のグラデーションの出来が悪くないなと感じまして。サクッと画像にかける分には必要十分に思えます。そして互換品ならPhotoshopチュートリアルにデフォルトのグラデーションを使った記事があったとき、その表現をそのまま真似できるので良いなと思ったのです。

しかし、移植してみたらグラデーションの色味がおかしい部分があったので一部の数値を修正。「黒」って書いてあるのデータにレッドが1%ほど入っていたり、謎の位置情報99%とかがある。どうも元々そういうデータとなってるらしいが、ただのバグだと思うので修正しました。

それに加えて、実装されてなかった金属系や虹色系グラデーションを追加しました。

スウォッチ(カラーパレット)

DICカラーパレット

2638色あります。

Affinityシリーズは日本語の組版や印刷環境に弱いですが、カラーパレットもアメリカのPANTONE社のものしか標準搭載されていません。Photoshop2022に実装されているDICカラーパレットをそのままafpalette形式に移植しました。

でも僕はDICカラーで色指定する事自体が最近少ないというか、印刷所にデータを送る機会が減ってるため、実はほぼ使いません……。何か間違いとかあったらコメント欄かTwitterで教えてください。修正します。

Bootstrap4 カラーパレット

14色あります。原典はColors · Bootstrap

Bootstrap4はWeb制作時に使うHTML/CSS用のフレームワークです。配色は限られており6色でして、色名は「Primary」「Secondary」など機能名に準じています。基本的にCSSのPrimaryやSecondaryの色を上書きし、少ない色数で画面をまとめていく方針なのでしょう。

Bootstrap5 カラーパレット

118色あります。原典はColor (カラー) · Bootstrap v5.0

Bootstrap5はWeb制作時に使うHTML/CSS用のフレームワークです。2021年5月5日に正式版がリリースされました。jQueryの廃止やサポートブラウザからInternet Explorerが廃止など、軽量化が注目されがちですが、使える色数は爆増しています。

Microsoft Fluent UI および Office 365用カラーパレット

332色あります。Fluent UI – Color

Microsoft Fluent UIのデザインガイドラインページは、ちょっとページ階層が深くて色情報を拾うのがやや手間です。なのでカラーパレットがあると便利かなぁと思って作りました。モックアップを作る時などにご利用ください。

Fluent UIとは、Microsoft社製のReact用UIコンポーネントです。……と書いても、フロントエンドエンジニア以外には「なんのこっちゃ」だと思うので、乱暴を承知で分かりやすく言うと、Microsoft社が「みんな!! Excelとかの追加機能を開発してくれ。開発用の使いやすいパーツも公開したよ。しかもExcel以外の用途に使ってもイイヨ!!」とバラまいてる代物です。本質的にはBootstrapと変わりませんが、こちらはOffice 365用のUIコンポーネントも含むので、SharePoint Frameworkなどを扱う際に参考とするガイドラインです。このカラーパレットでもSharePoint関連の配色データが多いですね。

さてFluent UIが本格的に実装されたWindows11が先日発表されました。僕はMicrosoftのFluent UIにはかなり期待感を持っています。でも僕はかつてWindows8の MetroDesign を「これぞ革新的で未来だ!!」と狂喜乱舞してた過去があるので、僕の見識は参考になりませんね……。

Apple社カラーパレット(iOS、macOS、watchOS対応)

36色あります。原典はColor – Visual Design – iOS – Human Interface Guidelines – Apple Developer

iOS(iPhone/iPad)、macOS、watchOS(AppleWatch)で指定されているカラーパレットになります。 ライトモード用とダークモード用で、それぞれ18色ずつあります。

Google社マテリアルデザインカラーパレット(AndroidOS)

273色あります。原典はThe color system – Material Design

GoogleAndroid用のカラーパレットとなります。Material Designの要素は年々改変が加えられていますが、カラーパレットは2014年にGoogle I/Oで発表された時から変化せず提供され続けています。

個人的な思い出ですが、2014年当時はiPhoneのほうがデザイン的に優れており、Androidは統一感のなさが嫌悪されていた風潮がありました。そんな時勢でのMaterial Designの発表は大変な衝撃でした。スマートフォン上の要素の動きとデザインに焦点を当てて「GoogleAndroidで良いデザイン体験が出来る」とアピールしていました。無論Google発表以前もデザインガイドラインやソフトウェアガイドラインなどは数多存在していましたが、Google I/Oの発表インパクトが、その後デザインガイドラインをWeb上に公開する現在の流れを後押ししたと思います。

カラーパレットについてですが、色数もそこそこで命名規則も分かりやすく、使いやすいと思います。

イギリス政府カラーパレット

33色あります。原典はColour – GOV.UK Design System

イギリス政府のGoverment Disign Serviceが策定・公開しています。正確な公開時期は覚えてないのですが、たしか2012年頃からGDSはデザインガイドラインっぽい啓蒙や単発記事をちょくちょく公開していて、しっかりしたデザインガイドラインは2017年くらいにはあったような気がします。

ページの真っ先に色のコントラストについてWCAG 2.1準拠たる事を定めてるあたり、良いなぁと感じます。あとFocus state(クリックしたときの挙動)が#ffdd00で表示されるのも良いですね。アクセシビリティが強く意識されています。

アメリカ合衆国政府カラーパレット

460色あります。原典はSystem color tokens | U.S. Web Design System (USWDS)

アメリカ合衆国のデザインガイドラインです。2015年9月に初稿が公開され、2019年4月8日にver2が発表され現在に至ります。多くの州が分かれてるアメリカ合衆国において行政機関が指標とすべきガイドラインです。

色ごとにNormal、Cool、Warmの3種類の色調に分かれ、さらにその中で10種類の明度に分かれます。色数は多いですが、かなり使いやすく僕もよく採用します。

エストニア政府カラーパレット

36色あります。原典はvärvid – Brand Estonia

エストニア政府が公開するデザインガイドラインです。ここのカラーパレットは無茶苦茶とがっていて、ピーキーそのもの。汎用性があるかというとNOなんですけど、面白いので作りました。ベースカラーは真っ青な #0000f0で、カラーグループの名前も「沼地」やら「国立公園」やらイマジナリーです。

面白いのは「rändrahnud」ってカラーグループなんですが、これは日本語で言うところの「岩」です。エストニア知識Lv1の僕にはよく分からないのですが、どうやらエストニアにはこのような巨岩が千以上あって、まさに国民の象徴なのだそうです。Wikipediaにはエストニアの岩リストなる記事すらあります。なんだろう、日本だと、そんじょそこいらにお地蔵さんがあるみたいな感覚に近いんだろうか?

エストニアの旅行計画を立てる方は、是非このカラーパレットを使ってみてください。

Atlassian社カラーパレット

61色あります。原典はColor – Foundations – Atlassian Design System

オーストラリアの企業 Atlassian社のデザインガイドラインにあるカラーパレットです。AtlassianはJiraやTrelloやBitbucketといった、業務改善系や開発系のソフトウェアを手がける会社です。

メインカラーはクールなブルーたる#0052CCで、テキスト等に採用される黒系の色にも若干青がまじっています。信頼感を主張するべく青系を多用する企業系サイトなんかにで、参考になるカラーパレットだと思います。

GitLab社カラーパレット

135色あります。原典はColor | Pajamas Design System

GitLabはソフトウェア開発時に使われるソフトとサービスを手がけています。

青、緑、オレンジ、赤、紫のメインカラー5色に加え、補完する中間色が6色あります。Web上では色にマウスカーソルを合わせるとアクセシビリティ度を示すコントラストチェッカーが表示されるので便利です。

でもWeb上で掲載されてるカラーはいくつか指定値が間違っているので、注意が必要です。例えば t-lightblue-950は#0a3764と指定されてるのに、サンプルページをスポイトすると本当のカラーは#0f2235になってます。こういう不思議な表記がいくつかありました。

Mozillaコミュニティカラーパレット

135色あります。原典はMozilla Protocol – Protocol Design System – Color

Mozilla財団は、ウェブブラウザのFirefoxやメーラーのThunderbirdを手がける団体です。

カラーパレットの特徴ですが、暖色が豊富です。ビビット感のある元気な印象。ポップなカラーパレットを作るときに参考にすると良いと思います。

ちなみにMozillaはこのガイドラインのほかに、Firefox Brand + Design Assets Photon も公開しています。こっちのカラーも彩度高めのカラーパレットに仕上がっていますが、そもそもFirefoxで2021年11月現在もこのPhoton Guidline が適応されてるのかよく分からないし、Mozilla Protocolと書かれてるジャンルは違うなれど被ってる領域もあり、差異がいまいち判別しにくいなぁと感じています。

Photoshopデフォルトのカラーパレット

115色あります。

Photoshop2022から移植しました。ただし、Photoshopのスウォッチパネルはグループ分けがされてたので、1ファイルとなるように修正しました。

まぁ自分は使わないですけれど、あれば便利な事もあるかもしれません。