カテゴリー: デザイン

スタイルガイドをFractalで作ってみよう!

「Fractal」とはスタイルガイドジェネレーターの一種です。複数人でwebサイトを作る際に一貫性を持ってデザインやコーディングができるようにまとめたものです。
スタイルガイドにはこの他に「sc5-styleguide」「Storybook」などがあります。

今回はFractalを使ってスタイルガイドを作成してみます。
すぐにデモを作成することができるので、比較的、簡単に導入ができるかと思います。


まずは任意の箇所にディレクトリを作成します。

mkdir fractal_test

作成したディレクトリに移動します。

cd fractal_test

プロジェクトを開始するためpackage.jsonを作成します。
「package name」などと聞かれますが、自由に入力して大丈夫です。

npm init

プロジェクトにFractalをインストールします。

npm install --save @frctl/fractal

グローバルにFractalCLIツールをインストールします。

npm i -g @frctl/fractal

Fractalのセットアップをします。
質問に答えていくと「fractal_test_01(または回答したプロジェクトタイトル名)」が表示されると思います。

fractal new fractal_test_01

「fractal_test_01」に移動し、Fractalを起動します。

cd fractal_test01/
fractal start --sync

「Fractal web UI server is running!」と表示されるので、Local URLをブラウザで表示します。

Local URL: http://localhost:3000

以下の画像のようにスタイルガイドが表示されたと思います。

これでスタイルガイドの準備ができました。
それでは、ボタンのコンポーネントを登録していきます。

「components」ディレクトリ内に「btn」ディレクトリを作成し、その中に「btn_default.hbs」を作成します。

「btn_default.hbs」の中に次のコードを記載します。

<a href="#" class="btn btn_default">Default</a>

左メニューが追加されたと思います。
btn
└Btn Default

同様に「btn_primary.hbs」「btn_success.hbs」を作成します。

btn_primary.hbs

<a href="#" class="btn btn_primary">Primary</a>

btn_success.hbs

<a href="#" class="btn btn_success">Primary</a>

同様に左メニューが追加されたと思います。
このままでは、cssが適用されてませんので、componentsディレクトリに「_preview.hbs」を作成し次のコードをコピーします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link media="all" rel="stylesheet" href="{{ path '/css/style.css' }}">
<title>Preview Layout</title>
</head>
<body>
{{{ yield }}}
</body>
</html>

その後、「public」ディレクトリの中に「/css/style.css」を作成し、cssを記載します。

すると、スタイルが適用されたと思います。

これがFractalの基本的な使い方となります。
さらに便利な使い方がわかりましたら改めて記事にしようと思います。

公式ガイド
https://fractal.build/guide/


未来の自分のためのユニバーサルカラーデザイン

こんにちは、3年目デザイナーのはなです。

このブログで度々ユニバーサルカラーについての記事を書いていますが、今回はその中でも加齢に伴うの色の見え方の変化について書きたいと思います。

(前に書いたやつ:https://blog.splout.co.jp/2790/ https://blog.splout.co.jp/5932/

生きている限り加齢は誰でも避けられません。

つまり、高齢者に配慮したデザインづくりは回り回って未来の自分のために役に立つということですね。

水晶体の黄変

水晶体は人間の眼のレンズの部分です。

例えば、透明なスマホケースなどを使用していると、時間が立つにつれてだんだん黄ばんできますよね。

それと同じことが人間の眼でも起こります。

水晶体が黄ばんでくると、薄い黄色と白の判別がつきにくくなったり深緑のような暗い色と黒色の判別がつきにくくなります

感覚としては、黄色がかったサングラスで世界を見ている感じに近くなります。

黒地に紫の文字や、白地に黄色の文字などは避けたほうが良いでしょう。

この組み合わせは高齢者以外でもとても見分けづらいのでやらないのが無難です!

装飾としてなら使用しても大丈夫です。

白内障

歳を取ると白内障になりやすくなります。

白内障の原因には疾患や薬の影響、外傷などがありますが、最も多いのが加齢です。

白内障の発症率は、60歳代で66~83%、70歳代で84~97%、80歳以上ではほぼ100%と言われています。

長生きするならほぼ避けられないということですね。

白内障は水晶体が白く濁ってくる病気です。

水晶体が濁ってくると、光に対して眩しさを感じやすくなります

つまり、画面が明るい状態で真っ白なページを見たときに不快感を感じやすくなるということです。

高齢者がよく見る可能性のあるサイトなどは、背景に薄いグレーを敷くなどするとよいかもしれません。

ただ、文字色とのコントラストもしっかり確保しないといけないので、本当にうっすらぐらいが良いと思います。

また、背景色が暗いページから明るいページにいきなりパッと変わる、というのも避けたほうが良いでしょう。

まとめ

私は、この世のすべてのデザインにユニバーサルカラーがいつも必ず意識されている必要はないと考えています。

若い人向けに作られたページであれば、多少高齢者への配慮がなくても大丈夫だと思います。

ただ、ターゲティングを行ったときに、高齢者の人が含まれる可能性があるなら配慮が必要です。

業務での使用が義務付けられているツール」「不特定多数の人が見る情報の掲示」などには気を使ったほうが、より優しい世界になると思います。

ユニバーサルカラーというものが意識され始めたのはわりと最近の話ですが、未来ではもっとポピュラーな概念になっていると思います。

そういう未来になるように、私も微力ながら頑張っていきたいです!


画像最適化、してますか?


こんにちは。デザイナーのMです。

突然ですが、皆さんは画像最適化してますか?(唐突
私はしています。

弊社ではサイトの制作などをさせて頂く機会が多々ありまして、制作の最終段階であるサーバーアップの前に、サイト内で使用する画像を圧縮して最適化するというフローがあります。

Webサイトのスマホ閲覧の割合がPCと半々、場合によってはPCの閲覧比率を超えることも珍しくなくなってきたので、通信容量(いわゆる”ギガ”)を少なくして、サイトを高速に表示させることが必須となっています📱

そこで今回は、普段使用している画像最適化ツールを紹介したいと思います。

TinyPng


https://tinypng.com/

「パンダのやつ」と僕は呼んでいます🐼
けっこう昔からあるので、かなり有名なオンライン画像圧縮ツールだと思います。
サイトを見て頂く通り、パンダが画像を圧縮してくれます。
Chromeのブックマークバーに突っ込んでるので、ブラウザ上からサクッと圧縮できる手軽さが便利です。
一気に20枚、または上限5MBまでの画像ファイル(jpg/png)を圧縮可能です。
gifよりきれいなアニメーションができる、Animated PNG(APNG)にも対応しています。
ページの下の方でパンダがぬるぬる手を振っていますね👋

対応ファイル形式:jpg / png / APNG

jpeg.io


https://www.jpeg.io/

こちらのサービスは、単純に画像を圧縮するというわけではないのですが、様々な形式の拡張子のファイルを一括でjpgに変換して最適化してくれるツールです。
png形式の画像はjpg形式に比べてファイルサイズが大きくなることがあるので、こちらを利用してjpgに変換することにより容量の削減になることもあります。特に写真を利用している素材とかですね📷
他にもpsdでワイヤーやカンプを作成して画像として書き出す際にも、こちらを使えばpsdからそのままjpgを作成してくれるので便利です。

対応ファイル形式:jpg / png / gif / svg / bmp / eps / psd / tiff / WebP

Squoosh


https://squoosh.app/

Googleが開発したオンライン画像圧縮ツールです。
サイトにアクセスして、画像をドラッグ&ドロップするとプレビュー編集画面に遷移します。
この画面上で画質や圧縮形式などを設定することができます。
また、画面の左右で圧縮前と圧縮後のプレビューを見比べることもできるので保存後のイメージを目で確認しながら調整することができます。めっちゃ便利👀
ただ、現状では画像1枚ずつしか編集することができないので、一括で圧縮をしたい場合には向いていません🙅‍♂️
私の場合は、画質を極力落とさずに綺麗な見た目のまま写真の容量を圧縮したいときなどのシビアな圧縮条件が求められる場合に利用することが多いです(あまりないですがw
ちなみにリサイズも同時にできるので、さらに容量圧縮したい場合などにも使えます。

対応ファイル形式 : jpg / JPEG2000 / mozjpeg / png / gif / pdf / bmp / tiff / WebP

ImageOptim(Mac向けアプリ)


https://imageoptim.com/

ImageOptimは、Mac向けの画像圧縮専用アプリです。
ブラウザからいつでも圧縮はできませんが、いつも利用しているPCにインストールしておけばすぐに使うことができます。
私はいつもこのアプリを使って画像を最適化することが多いです。
アプリをインストールして、Finderで画像を右クリックすると「ImageOptimize」という項目が表示されます。
その項目をクリックすると自動でアプリが起動して、画像最適化を開始してくれます。便利!
容量制限なしで、複数選択もできるのでバシバシ使用することができます🤘

ファイル形式:jpg / png / gif

ReSizer(iOSアプリ)


https://apps.apple.com/jp/app/jp/id1388705112

弊社が開発したiOS向けの画像リサイズアプリです。
直感的なUIで画像を好きなサイズにリサイズ、画質を選択することで容量も最適化することができます。
カメラロールからの一括選択にも対応。画像に関するExif情報の確認や削除もこのアプリからできます。
スマホからブログを書く際や、ストレージの容量を確保したいときなどに大変重宝するアプリなのでぜひ一度インストールしてみてください✨



ぜひ今回ご紹介したツールを利用して画像の最適化をしてみましょう!
楽しく快適なインターネットライフを🥺


SketchプラグインのCraftでプロトタイプを作成してクライアントと共有しよう!

Craftとは

Craftとは、InVisionが提供するSketchとPhotoshop用の無料プライグインです。

プロトタイプを作成する他にも、SketchでUIデザインするときに便利な機能がたくさんあります!

プロトタイプの共有方法

1.  InVisionに登録し、Craftをインストールします。
インストール方法はこちらをご覧ください。

2. Craftを起動し、InVisionにログインします。

3. Sketchでリンクしたい要素をクリックし、キーボードの「C」を押します。
青い矢印が出てくるので、リンク先のアートボードを選択します。

4. アートボードをつなげたら、syncボタンをクリックします。 

5. 初回の場合のみ「Create new」を選択し、デバイスなどを設定します。
設定が完了したら「Publish」をクリックします。

6. InVisionの管理画面にアクセスすると、先程作成したプロトタイプがあります。(その他デフォルトに並んでいるのはサンプルです。)

マウスーバーをすると「SHARE」ボタンが表示されるので、そちらをクリックします。

7. 招待ウィンドウが開きます。通常に招待すると招待された方もInVisionにログインする必要があるのですが、下部にある「public share link」をクリックしたときにコピーされるURLを共有すれば、どのデバイスからでもプロトタイプを確認することができます。

共有されたプロトタイプにはコメントを残すことができます。

簡単ですが、Craftのプロトタイプの共有について紹介をいたしました。
Sketchがメインの制作環境の場合、Craftを活用するとプロトタイプの制作と共有が簡単にできそうですね!


『Figma』それはデザインツールの進化系

こんにちは。デザイナーのMです。
今回は、前から触ろう触ろうと思いながらも触れていなかった『Figma』を使ってみたので、ブログに書こうと思います。

Figmaとは?

ひとことで言えば、『いつでもどこでも誰とでも使えるデザインツール』です。
オンライン上で複数人同時にデザインすることができるめちゃくちゃ便利なツールです。しかも無料で👌

なにはともあれ導入です

導入と言っても、Figmaは “Webブラウザベースのデザインツール” なので以下のURLにアクセスしてアカウント登録をするだけで終わります🙄(驚愕

Figma: the collaborative interface design tool.
https://www.figma.com/


今までの、アプリをダウンロードしてインストールして…とかの地味に面倒くさいフローが無くなってることに衝撃を受けました。。
ちなみにアカウント登録して、デザイン作成画面を表示させるまでに要した時間は1分ほどでした。早い🥺

画面のざっくりとした説明など

デザイン作成画面はシンプルです。SketchやXDを普段使ってる人ならそこまで違和感なく操作できるかと思います。

1.各種ツール

「選択ツール」「フレーム(アートボード)作成」「オブジェクト作成」「ペンツール」「文字入力」「コメント」
の順で各種ツールが並んでいます。

2.レイヤー、アセット

レイヤー階層や共通アセットの管理などができます。

3.デザイン詳細パネル

色やフォント、サイズなどを制御できるパネルです。
SketchとかとUIが似てるので問題なく使えると思います。

4.共有機能

これが、Figmaの真髄✨とも言うべき機能だと思います。
瞬時に”今”作ったデザインを共有できます。
そしてそのデザインをリアルタイムで一緒に編集することができます(後述)。

実際の動作を見てみましょう

歯車風のオブジェクトをサクッと作ってみました。これぐらいなら秒でできます😎

そして他の人に共有してみる

先程書いた、共有機能を使ってみたいと思います。
感覚としては、Googleドキュメントやスプレッドシートなどの共同編集と同じですが、それがデザインツールでできるのは感動しました🥺

左右それぞれ別の人が別端末のブラウザから見ている、という想定です。
ほぼリアルタイムで編集した内容を反映しているのが分かると思います。

共同編集できるメリットとしては、
・修正、変更内容が全てビジュアルで可視化されるのでわかりやすい
・バージョン管理を利用するとデザインデータのコンフリクトを防げる
・複数のデザインデータを作成しなくて済む
・デザインデータの置き場所に悩まなくて済む
・コメントなどですぐに修正点を伝えることができる
・一緒にデザインするのはワクワクする🤩 ←これ

いいことばっかり✨
ただ、日本語入力対応などは少し遅れてるっぽいです😂(海外ツールあるある

まとめ

今回Figmaを少し使っただけでも、このデザインツールのスゴさを実感できました。
Figmaにはまだまだ紹介しきれない機能がたくさんあるので、実務などにも少しずつ導入していきながら理解を深めていきたいと思います💪