デザインシステムの作り方徹底ガイド 参考にしたい導入事例まとめ
この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ
Webデザイン制作の見本に！すぐれた最新実例サンプル33点まとめ
この記事では、進化を続けるWebデザインの最新の実例サンプル33点をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象や配色、レイアウト、書体などの新しいアイデアや発想を手に入れましょう。 アイデアに困ったときの参考サンプルとしても活用できるので、2021年のWebデザイントレンドと一緒にチェックしてみてはいかがでしょう。 ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ Webデザイン制作の見本に！すぐれた最新実例サンプル33点まとめ Umami Land Googleによる日本食を外国人向けに紹介したページで、食べものを探しながらステージを進めていく、ゲーム要素を盛り込んだ体験型ウェブサイト。Googleマップと連動しており、近くで食べれるお店もリコメンド。 Good Meat 一般的に食用とされている鶏誕生の由来から、今後の代替肉への消費の移行
これどうやるの？フォトショップ最新の使い方やテクニック、チュートリアル48個まとめ
この記事では、フォトショップの新しい使い方やテクニックを短時間でマスターできる最新チュートリアル48個をまとめてご紹介します。 今回紹介するフォトショップのチュートリアルを手順どおり進めていくことで、より実践的なツールや機能の使い方を覚えることができます。 これどうやるの？フォトショップの最新テクニックや使い方、チュートリアルまとめ 継ぎ目のない複雑なデザインパターンを作成する方法 あらゆるデザインで継ぎ目のないパターンを作成するテクニック。以前紹介した記事も参考にしてみると良いでしょう。 フォトショップ凄すぎ！継ぎ目のないパターンを作成するプラグイン Adobe Textile Designer の使い方完全ガイド さまざまなカモフラージュ柄パターンをデザインする方法 フォトショップをつかって継ぎ目のないカモフラージュパターンを作成します。長めですが、手順どおり進めていくだけで基本ツール
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
【商用可＆無料】2019年上半期ベスト英語・日本語フリーフォント厳選90個まとめ
当サイトでは、毎月新しく公開されたフリーフォント素材をまとめてご紹介しています。この記事では、2019年上半期にリリースされた、商用利用でも使える完全無料の英語・日本語フリーフォントをまとめてご紹介します。 オシャレな英語フリーフォントから、需要の多い日本語フォント、2019年注目を浴びている高級感のあるセリフ書体、安定人気の筆記体、筆ブラシの手書きナチュラル系、モダン・レトロ、ビンテージ、デコレーションなど幅広いカテゴリよりフリーフォント素材90個を厳選しています。 2018年の商用可能なフリーフォントに関しては、以下の記事を参考にどうぞ。 商用可で完全無料！2018年公開のフリーフォント素材132個総まとめ コンテンツ目次 1. 日本語フォント 2. 万能フォント 3. 筆記体フォント 4. サンセリフ書体 5. セリフ書体 6. 手書きナチュラル系フォント 7. 筆ブラシ・フォント
Webが進化中！参考にしたい話題の最新ウェブデザイン30個まとめ
デザイン制作のインスピレーションや参考にしたい、2019年に入って注目を集めている、最新ウェブサイトデザイン30個をまとめています。 落ち着いた配色や、美しいセリフ書体、繊細なアニメーション、マイクロインタラクションなどを利用したサイトが増えています。クリエイティブでユニークな最新ウェブデザインを体験してみてはいかがでしょう。 【総まとめ】2018年印象に残った世界のベストWebデザイン厳選51個 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 Webが進化中！参考にしたい注目の最新ウェブデザインまとめ Tao Tajima スクロールの強弱に応じて、�3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています。 Kitamura Makura ま
動画、映像作品がグンと良くなる！制作に役立つ無料エフェクト素材191個 - PhotoshopVIP
SNSなどソーシャルメディアをつかった共有、シェアが当たり前になっているいま、プロモーション用の映像やムービー動画などのコンテンツが増えています。先日のAdobe Maxでは、初心者でも簡単にできる動画編集アプリ Premium Rush が発表され、YouTube向け動画などを簡単に作成できるようにもなりました。 After Effects や Premiere Pro、Final Cut Pro X などで手軽に利用でき、プロ級の本格的なエフェクトを実現できる、無料素材191種類が公開されていたので、今回はご紹介します。 完全無料で使える！映像制作に役立つフリー動画素材サイト16個まとめ 動画、映像作品がグッと良くなる！制作に役立つ無料エフェクト素材まとめ キラリと光るレンズフレア17種類や、壮大な宇宙をテーマにしたテクスチャ素材、写真ギャラリーなどの切り替えに便利なモーショングラフィ
デザインの幅を広げる最新フリーフォントコレクション67個まとめ 2018年8月度
見ているだけで楽しくなる、個性豊かで、あらゆるデザインシーンで使える、新作フリーフォントをまとめています。個人利用、商用利用の可否についても一緒に記載しているので、デザインの目的に合った書体をスムーズに見つけることができます。 豊富なウエイトが揃ったシンプルな万能フォントから、数が増えてきた話題のSVGフォントや人気のブラシ、筆記体フリーフォントの他にも、幅広いバラエティが用意されているので、今後のデザイン案件に活用してみてはいかがでしょう。 商用可能な無料フォント限定！2018年上半期公開のフリーフォント厳選80個まとめ デザインの幅を広げる最新フリーフォントコレクションまとめ ミシミシ コミックデザインの際に作ったフォントを展開したものです。タイトル・見出しなど注目してほしい部分をより効果的に。 ※ 個人、商用利用可能 タイムマシンわ号 アルゴリズムによって半自動的に生成されたという、
フォント、書体を完全マスター！デザイン作成が超快適になる無料ツール、拡張機能25個まとめ
コンテンツ・ファーストに対する考え方が、デザイナーに認識、理解されるにつれて、デザイン過程において優れたタイポグラフィの作成がますます重要になってきています。 しかしタイポグラフィの扱いはとてもデリケートで、特にこれから始めようというひとにとって厄介な問題です。このリストでは、よりタイポグラフィ作成を快適に進めることができる無料ツールをまとめてご紹介します。ここで紹介するツールは、コンテンツを改善し、より良いデザインを手がけるのに役立つものばかりが揃います。 ここでは、以下のカテゴリ別に分かれています。 フォントの選択、ダウンロード フォントの組み合わせやスタイリング フォントの縮尺スケール デザインインスピレーション フォント、書体を知ろう！デザイン作成が快適になる無料ツール、拡張機能まとめ フォントの選択、ダウンロード タイポグラフィーの作業プロセスは、フォントの選択から始まります。選
Photoshopでここまでできる！すごい無料モックアップテンプレート69選
完成したデザインを適切に展示、披露するのに便利な、無料モックアップテンプレート素材をまとめてご紹介します。Photoshopで利用できるPSDモックアップは、スマートオブジェクト機能を使い、完全に独立したレイヤー化されているので、ドラッグ&ドロップのみでモックアップテンプレートを簡単に作成できます。 クライアント向けのプレゼン資料や、あらゆる業種のブランディングなどに活用でき、まるで撮影したような本物そっくりの見た目が特長で、幅広いジャンルから集められた新作素材ばかりです。 【2017年総まとめ】モックアップ作成で絶対役立つ！すごいPSD素材厳選100個まとめ なお、モックアップの詳しい使い方やカスタマイズ方法については、以下のエントリーで紹介しています。こちらも参考にしてみてはいかがでしょう。   モックアップでデザイン力を上げる！手軽で無料のPSDファイル50選 無料ダウンロー
ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。 今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。 進行状況（英: Progression） ローディング・アニメーション ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。 シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
2017年に注目したい！Webサイト制作の背景デザインアイデア5選まとめ
ウェブサイトで一般的に利用されている白い背景デザインの代わりに、よりモダンなスタイルを試してみませんか。 多くのミニマルスタイルはまだまだ人気で、デザイナーは、白を使う代わりに鮮やかな色と灰色の組み合わせを選ぶようになっています。背景効果には、クールな幾何学模様や、左右非対称のパターン、抽象的なアートなどのテクニックを利用することで、よりクリエイティブな可能性を提案できます。 今回は、2017年のウェブ制作で参考にしたい背景デザインの注目トレンドを、サンプル例と一緒に詳しく見ていきましょう。 詳細は以下から。 01. 写真と合わせた幾何学模様 ヒーローイメージとイラストを使ったデザインは、もっとも人気の高い背景スタイルのひとつです。大きな画像イメージを利用することで、ユーザーへの注目を集めるのに最適です。 多くのケースで、フルサイズの画像イメージをホームページの背景として利用し、文字テキス
Bootstrap 4 の新機能を徹底比較！Flexbox と通常グリッドの使い方まとめ
Bootstrap 4 では慣れ親しんだグリッドシステムに変更が加えられました。より大きな画面サイズに対応する XL グリッドが追加された他、新しいグリッドシステム「フレックスボックス」バージョンが収録されました。 通常のグリッドと Flexbox 版には互換性がないので、プロジェクトに応じてどちらを利用するか選択する必要があります。この記事ではBootstrap 4における2つのグリッドシステムの違いを詳しく見ていきましょう。比較しやすいよう、グリッドを利用した具体的な参考デモページも用意しています。 コンテンツ目次 1. インストール 2. 通常グリッドレイアウト 3. カラムの折り返し 4. レスポンシブ・グリッド 5. 行の高さ調整 6. 水平方向の整列 7. 垂直方向の整列 8. 列の並び替え 01. インストール Bootstrap をプロジェクトに利用する一般的な方法は、CD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
