弊社ではサイトの制作などをさせて頂く機会が多々ありまして、制作の最終段階であるサーバーアップの前に、サイト内で使用する画像を圧縮して最適化するというフローがあります。Webサイトのスマホ閲覧の割合がPCと半々、場合によってはPCの閲覧比率を超えることも珍しくなくなってきたので、通信容量(いわゆる”ギガ”)を少なくして、サイトを高速に表示させることが必須となっています📱そこで今回は、普段使用している画像最適化ツールを紹介したいと思います。TinyPnghttps://tinypng.com/「パンダのやつ」と僕は呼んでいます🐼けっこう昔からあるので、かなり有名なオンライン画像圧縮ツールだと思います。サイトを見て頂く通り、パンダが画像を圧縮してくれます。Chromeのブックマークバーに突っ込んでるので、ブラウザ上からサクッと圧縮できる手軽さが便利です。一気に20枚、または上限5MBまでの画像ファイル(jpg/png)を圧縮可能です。PNG(APNG)にも対応しています。APNGjpeg.iohttps://www.jpeg.io/こちらのサービスは、単純に画像を圧縮するというわけではないのですが、様々な形式の拡張子のファイルを一括でjpgに変換して最適化してくれるツールです。png形式の画像はjpg形式に比べてファイルサイズが大きくなることがあるので、こちらを利用してjpgに変換することにより容量の削減になることもあります。他にもpsdでワイヤーやカンプを作成して画像として書き出す際にも、こちらを使えばpsdからそのままjpgを作成してくれるので便利です。WebPSquooshhttps://squoosh.app/Googleが開発したオンライン画像圧縮ツールです。サイトにアクセスして、画像をドラッグ&ドロップするとプレビュー編集画面に遷移します。この画面上で画質や圧縮形式などを設定することができます。画面の左右で圧縮前と圧縮後のプレビューを見比べることもできるので保存後のイメージを目で確認しながら調整することができます。私の場合は、画質を極力落とさずに綺麗な見た目のまま写真の容量を圧縮したいときなどのシビアな圧縮条件が求められる場合に利用することが多いです(あまりないですがwちなみにリサイズも同時にできるので、さらに容量圧縮したい場合などにも使えます。WebPImageOptim(Mac向けアプリ)https://imageoptim.com/ImageOptimは、Mac向けの画像圧縮専用アプリです。ブラウザからいつでも圧縮はできませんが、いつも利用しているPCにインストールしておけばすぐに使うことができます。私はいつもこのアプリを使って画像を最適化することが多いです。アプリをインストールして、Finderで画像を右クリックすると「ImageOptimize」という項目が表示されます。その項目をクリックすると自動でアプリが起動して、画像最適化を開始してくれます。gifReSizer(iOSアプリ)https://apps.apple.com/jp/app/jp/id1388705112弊社が開発したiOS向けの画像リサイズアプリです。直感的なUIで画像を好きなサイズにリサイズ、画質を選択することで容量も最適化することができます。カメラロールからの一括選択にも対応。画像に関するExif情報の確認や削除もこのアプリからできます。その他画像最適化、してますか?にコメントSketchプラグインのCraftでプロトタイプを作成してクライアントと共有しよう!CraftとはCraftとは、InVisionが提供するSketchとPhotoshop用の無料プライグインです。InVisionに登録し、Craftをインストールします。インストール方法はこちらをご覧ください。Craftを起動し、InVisionにログインします。Sketchでリンクしたい要素をクリックし、キーボードの「C」を押します。青い矢印が出てくるので、リンク先のアートボードを選択します。アートボードをつなげたら、syncボタンをクリックします。new」を選択し、デバイスなどを設定します。設定が完了したら「Publish」をクリックします。InVisionの管理画面にアクセスすると、先程作成したプロトタイプがあります。(その他デフォルトに並んでいるのはサンプルです。)マウスーバーをすると「SHARE」ボタンが表示されるので、そちらをクリックします。招待ウィンドウが開きます。link」をクリックしたときにコピーされるURLを共有すれば、どのデバイスからでもプロトタイプを確認することができます。共有されたプロトタイプにはコメントを残すことができます。簡単ですが、Craftのプロトタイプの共有について紹介をいたしました。デザインSketchプラグインのCraftでプロトタイプを作成してクライアントと共有しよう!にコメント『Figma』それはデザインツールの進化系こんにちは。今回は、前から触ろう触ろうと思いながらも触れていなかった『Figma』を使ってみたので、ブログに書こうと思います。Figmaとは?ひとことで言えば、『いつでもどこでも誰とでも使えるデザインツール』です。オンライン上で複数人同時にデザインすることができるめちゃくちゃ便利なツールです。tool.https://www.figma.com/今までの、アプリをダウンロードしてインストールして...とかの地味に面倒くさいフローが無くなってることに衝撃を受けました。ちなみにアカウント登録して、デザイン作成画面を表示させるまでに要した時間は1分ほどでした。画面のざっくりとした説明などデザイン作成画面はシンプルです。SketchやXDを普段使ってる人ならそこまで違和感なく操作できるかと思います。1.各種ツール「選択ツール」「フレーム(アートボード)作成」「オブジェクト作成」「ペンツール」「文字入力」「コメント」の順で各種ツールが並んでいます。2.レイヤー、アセットレイヤー階層や共通アセットの管理などができます。3.デザイン詳細パネル色やフォント、サイズなどを制御できるパネルです。SketchとかとUIが似てるので問題なく使えると思います。4.共有機能これが、Figmaの真髄✨とも言うべき機能だと思います。瞬時に”今”作ったデザインを共有できます。そのデザインをリアルタイムで一緒に編集することができます(後述)。実際の動作を見てみましょう歯車風のオブジェクトをサクッと作ってみました。これぐらいなら秒でできます😎そして他の人に共有してみる先程書いた、共有機能を使ってみたいと思います。左右それぞれ別の人が別端末のブラウザから見ている、という想定です。リアルタイムで編集した内容を反映しているのが分かると思います。←これいいことばっかり✨ただ、日本語入力対応などは少し遅れてるっぽいです😂(海外ツールあるあるまとめ今回Figmaを少し使っただけでも、このデザインツールのスゴさを実感できました。デザイン『Figma』それはデザインツールの進化系にコメント“概念”をイラスト化するときの手順こんにちは、三年目デザイナーのはなです。私は自社サービスのLPなどをよく作成させていただいているのですが、その際、機能説明や特徴紹介のところに簡単な説明文と共にイラストを入れることが多いです。「悩んでいることはありませんか?」という説明文に添えるイラストであれば「悩んでいる人のイラスト」を、「親子のコミュニケーションを円滑にします」という説明文であれば、「仲が良さそうな親子のイラスト」を添えるなど、なんとなく文からイラストが想像できるものであればイラストの作成はあまり難航しません。「シンプルです」「簡単です」のようなとても抽象的なワードに添えるイラストを作成するときはとても難航します。「面倒を減らします」「登録は必要ありません」などの、何か(手間とか紙の書類とか)がマイナスになることでメリットを打ち出しているものもとても難しいです。言葉の中に具体的なモチーフがないため、まず「何を描くか」を決めなければいけません。描くモチーフを決めるために、その文から連想ゲームのようにいろいろな単語を引き出していきます。リストにして列挙してもいいですし、マインドマップを作成するのもいいです。今回は例として「手間を減らします」という説明文に添えるイラストのモチーフを考えます。モチーフのアイデア出しは気の済むまでやります。すごく早く終了するときもあれば、ずっとやっているときもあります。世界観を合わせる連想ワードを書き出したら、そこからどれをイラスト化していくか決めます。ポップで楽しそうなデザインの中に入れるイラストであれば、動物やお花、植物などのモチーフを選んでもいいかもしれません。スタイリッシュでかっこいい感じのデザインであればスマホなどのデバイスや、オフィスなどのモチーフを選んた方がいいと思います。描き方も、手書き風にしてみたり、ベクターでかっちり作ってピクトグラム風にしてみたり、デザインに合わせて作ります。今回はラフでかわいい感じのデザインにいれる事を考えて、マインドマップから以下のモチーフを選びました。・経理の人がラクしてるところ・ロボット・ベルトコンベアそれをもとに作成したラフが以下になります。ラフを作ったら絵柄をデザインに合わせることに意識を向けつつ、完成させます。絵本風のかわいい絵ができあがりました。このイラストに「経理担当者の手間を減らします」と添えてあったらなんとなくハッピーな感じが伝わるのではないでしょうか・・・?まとめWebサイトの素材として作るイラストは割と抽象的なものを表さないといけないことが多く、どうしたらいいんだ...と悩んでしまうことも多々ありますが、マインドマップなどでモチーフを考えることで、「いつもおんなじようなモチーフ選びになってしまう」を避けることができます。デザイン“概念”をイラスト化するときの手順にコメント【コピペOK!】ちょっと使うだけで、なんかいい感じになるデザインcssまとめこんにちは。デザインが捗るcss3をいくつかご紹介したいと思います。コピペですぐに使えるので、ぜひちょちょっと使ってみて下さい。rgba(0,0,0,0.05);その名の通り、なんかいい感じのシャドウを付けるcssです。普段から皆さん普通に使われているのだと思いますが、まずは基本としてご紹介します💁🏻‍♂️ポイントは「うっすら」。シャドウの透過を濃くしたら安っぽくなるので、うっすらふわっとシャドウが見えるを目安に付けるといいと思います。60%);文中の文字を強調させるのに、太字や文字色を使ってたけどなんか面白みが無い、という人におすすめです。マーカーを使うと人肌感といいますか、少し温かみのある表現になる気がします。小学校の頃を思い出します。transparent;グラデーションカラーやフォントとの組み合わせ次第で、とてもオシャレな装飾をすることができます。blur(8px);ちょこっと隠したいときとか、、に使うのはどうでしょう?あんまり使うことはないかもしれませんが、続きを読ませたいときやコンテンツを隠して気になるようなデザインにしたいときに使うと相性が良さそうです。20%;}画像にめくれ風処理をするcssです。こちらもシャドウは控えめに付けるのがポイントです。アニメーションと併用しても相性が良さそうです。以上、すぐに使えるデザインcssまとめでした。usコンサルティング・Webサービス開発を得意とします。コミュニケーションのあたらしいカタチを創造します。