この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる

こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー

商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます

Microsoftペイントとマウスを使って描いたようなラフなイラストが、一瞬でリアルな風景写真に変換される画期的な技術をNVIDIA Researchが開発しました。「GauGAN」と呼ばれるインタラクティブなソフトウェアは膨大な学習データを用いたディープラーニングを使ったもの。GauGANを使えば「オブジェクトの形を描くだけ」「線を引くだけ」で誰でもアイデアを形にすることができます。 GauGAN Turns Doodles into Stunning, Realistic Landscapes | NVIDIA Blog https://blogs.nvidia.com/blog/2019/03/18/gaugan-photorealistic-landscapes-nvidia-research/ GauGANがどのくらいすごいのかは、以下のムービーを見ると一発でわかります。 Cha

アドビは、日本人のデジタルコンテンツ消費に関する“5つのトレンド”を発表した。米国、オーストラリア、インド、日本の4か国で、デジタルデバイス（スマートフォン、タブレット、PCなど）を所有する18歳以上のユーザーを対象とした意識調査「2019 Adobe Consumer Content Survey」の結果をもとに、日本人のデジタルコンテンツ消費に焦点を絞って分析を行った。 その結果、以下の5つが、日本人のデジタルコンテンツ消費における傾向だと指摘されている。 日本の消費者がデジタルコンテンツに費やす時間は、一日平均4.8時間。日本の消費者は、質の低い体験に不寛容。日本の消費者は、実店舗よりYahoo!ショッピングや楽天などの「オンラインショッピングサイト」を利用。ブランド企業は、不快にさせない程度にパーソナライズしたコンテンツの提供が必要。ほとんどの消費者が、依然としてソーシャルメディア

Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの

よく講演をした後に、そのような質問を受けることが多い。 結論から言うと、経営者にデザインやエンジニアリングの重要性を伝えようと頑張るのは、オススメできない。なぜなら、それを大事にしてくれる別の経営者と仕事をする方が、はるかに簡単で手っ取り早いからだ。 基本的に、経営者の考えを転換させるコストは極めて高い。それだけの時間やコスト、能力や忍耐があれば、転職先や別のクライアントを見つける方が簡単だ。そもそも、ある程度は職を選べる能力がなければ、経営者の考えを変えることはおろか、アクセスすることすら難しい。 シンプルに、デザインやエンジニアリングを経営に持ち込みたい人は、そのような経営者と仕事をすべきだ。過去に色々なクライアントで、経営者や社長室、経営企画室、新規事業部の方々とお会いしてきたが、実質的にそれ以外の答えは無いと思う。 経験上、ほとんどの経営層は人的ロジスティクスの硬直化が起きるまで、

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSassの超軽量ライブラリを紹介します。

商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision

無料で利用できるベクター素材は、制作時間のかかりそうなイラストやパーツなどを手軽に利用できる、グラフィックデザインでも重宝するアイテムです。 今回は、さまざまなシーンで利用可能な、高品質なベクター素材を無料ダウンロードできるサイト22個を国内、海外編に分けてご紹介します。 ベクター素材のクオリティが高いのはもちろん、商用利用にも対応したフリー素材が数多く公開されています。制作時間が短縮したいというときにいかがでしょう。 デザイン力で勝負する！ベクター素材を無料ダウンロードできるWebサイト厳選22個まとめ 海外編（全12サイト） unDraw デザイン性の高さだけでなく、豊富なジャンルを網羅したスタイリッシュなベクターイラストを多数公開しています。すべてのイラストのタッチが統一されているので使いやすく、その場で配色を変更、確認することも可能。 Humaaans 着せ替え人形感覚で、人間のイ

何らかの意図やさまざまな機能を記号化して表現するアイコンはサービスやUIを分かりやすく彩ってくれるものですが、細かいアイコンを多数用いる場合、画像としてダウンロードして埋め込んで、というのは面倒なもの。アイコン集「Unicons」では、1000以上のアイコンを無料かつ登録いらずでゲットできるほか、画像のダウンロードも不要でフォントのようにサイトにアイコンを埋め込むことができます。 1000+ free vector icons - Unicons - Iconscout https://iconscout.com/unicons 「Unicons」のトップページから「Start using for Free」をクリックすると、使い方説明にスクロールします。 アイコンを埋め込むために必要なのはわずか2ステップで、CSSに特定のコードを追加した後、埋め込みたいアイコンを選んでコピーしたMark

去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。

人物・動物・植物をはじめ、デジタル機器、建物、家具など、日常で見かける標準的なさまざまなスペースとサイズを図版化したDimensions.Guideを紹介します。 人物だけでも、老若男女の立ち・座り・寝・歩き・運動、そして正面・側面・上面が揃っており、イラストやデザインの参考資料になると思います。 Dimensions.Guide Dimensions.Guideではさまざまな図版が揃っています。 例えば、25-45歳の女性が歩いている時のサイズ。 平均身長は1.63mに設定されており、カジュアルな服装で歩いている横向きです。 Walking Female Side 素材はすべて商用でも無料で利用できます、クレジットは特に必要ありません。ただし、素材そのものを再配布・再販売することは禁止です。詳しくはライセンスページをご覧ください。 legal ダウンロードできる素材のフォーマットは、3種

個人でも商用でも無料利用できる、日本語のフリーフォント707種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ 前年の647からフリーフォントが50種類くらい増えています！ ※サイト閉鎖などでかなりのフォントが減っています。気になったフォントはダウンロードできるうちにダウンロードしておくことをお勧めします。 本記事は定期的に、全フォントを確認して、更新しております。 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。 更新情報 2024/6/4: フォントを10種類追加 2024/2/20: フォントを11種類追加 2023/12/26: フ

画像の加工を行っている時、「画像に映っている人物だけを抜き出して、背景を全て消し去った透過画像を簡単に作りたい」と思った経験がある人もいるはず。「remove.bg」はそんな人にピッタリな、AIを使ってわずか数秒で背景と人物を分離してくれる登録不要＆無料のウェブサービスです。 Remove Background from Image – remove.bg https://www.remove.bg/ 「remove.bg」を使うには公式ページへアクセスし、「Select a photo」をクリック。 すると、コンピューターのフォルダから写真を選択できるので、加工したい画像を選択して「開く」をクリック。 ほんの数秒間処理が行われ…… オリジナルの画像から人物だけを抜き出し、背景を除去した画像が表示されました。remove.bgでは学習済みのAIが人を「前面」として検出し、それ以外の要素が「

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。

1975年宮城県生まれ。元SEでフリーライターというインドア経歴だが、人前でしゃべる場面で緊張しない生態を持つ。主な賞罰はケータイ大喜利レジェンド。路線図が好き。（動画インタビュー） 前の記事：ビジネスホテルのこだわり大全〜実践編〜 ＞ 個人サイト 右脳TV 路線図で「コミュニケーションデザイン」を学ぶ というわけで千葉大学にやってきた。正確には千葉大学工学部。最寄りはJR西千葉駅である。 門の前で待っていたら歩道をテレビクルーが通り過ぎていった。『月曜からよふかし』の総武線ロケだろうか。 「コミュニケーションデザインⅣ」講義を担当する大森正樹さん。大学教授ではなく、鉄道会社JR西日本の方である。なぜ鉄道会社JRの人が大学で？というのは後ほど。 ひとくちに「デザイン」と言ってもいろいろある。 図形とか模様とかに限らず、建築も衣服もWebも工業製品もみんなデザインだ。「私もサザエさん、あなた