Webはここまで進化中！コピペもできるHTML／CSS参考スニペット84個まとめ
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ
ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
レベル高っ！商用可能な無料HTMLテンプレート200+種類を配布しているサイト Colorlib
商用プロジェクトでも利用でき、モバイル端末でのサイト表示にも対応した高品質なHTMLテンプレート素材を200種類以上公開しているサイト Colorlib を今回はご紹介します。レスポンシブデザイン対応はもちろん、Bootstrapフレームワークを利用したものが中心で、カスタマイズも手軽に行うことができます。 ホームページを作成しよう！無料で使える高品質HTMLテンプレート26個まとめ 2018年4月度 無料で最強！レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度 HTMLテンプレートのライセンスについて Colorlib で公開されている200種類を超えるHTMLテンプレートは、どれも Creative Commons Attribution 3.0 License （CC BY 3.0）となっています。HTMLテンプレートを無料ダウンロードするときは、以下の点
デザイナーが持っていたい、すごいフリーフォント素材63個まとめ
デザインをしているときにどれを使おうか迷うことも多く、デザイン全体の雰囲気やイメージを決める重要な作業のひとつが、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、あらゆる幅広いデザイン案件に対応したり、クリエイティブな作品づくりに活用してみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された万能スタイルの書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 デザイナーが持っていたい、すごいフリーフォント素材まとめ 2018年3月度 Sunderline Script Free Font スムーズに流れるような筆記体が特長のフリーフォントで、どんなデザインにも合わせやすいシンプルな書体。 ※ 個人利用可能 MADE Evolve
デザイナーが愛用したい！すごいPhotoshopブラシ素材45個まとめ 2018年3月度
使っているブラシに飽きてしまい、新しい素材が欲しいけど、無駄なブラシはダウンロードしたくない。そんな Photoshop ユーザーの要望に応える、高品質で無料の新作Photoshopブラシ素材をまとめています。 日頃のデザイン作業で使える便利な素材から、本格的なデジタルペイント向けブラシ、人気のライティングエフェクトや煙、雲などの風合いを手軽に表現できるアイテムなど、幅広いセレクションを揃えています。ブラシ素材のインストール方法と一緒にまとめています。 【総まとめ】2017年公開！デザイナーが持っておきたいPhotoshop無料ブラシ厳選64個 手描きイラストや水彩ペイントに強い、すごい無料Photoshopブラシ素材まとめ Photoshop ブラシのインストール、追加方法 ツールボックスよりツールボックスより「ブラシツール」を選択し、オプションバーより「ブラシパネルの切り替え」をクリッ
無料で使える！デザインが良くなるフリーフォント57個まとめ 2018年2月度
デザインをしていると、どれを使おうか迷ってしまうことも多いフォント。今回は、無料ダウンロードできる最近公開のフリーフォント素材をまとめてご紹介します。 太さに応じて豊富なウエイトが用意された万能フォントから、手書きやブラシスタイルの他に、人気の高い美しい筆記体デザイン、昨年の暮れから話題となっている、フォントデザインの柔軟性を格段にアップする「カラーフォント」まで、幅広いセクレションが揃います。 テーマ、目的別に探す！合計2000個のフリーフォント素材まとめ完全版 商用可で完全無料！2017年公開のフリーフォント素材129個総まとめ 無料で使える！デザインが良くなるフリーフォントまとめ Mort Modern 56種類もの膨大なウェイト数を収録したセリフ書体で、高級感のあるスタイリッシュなデザインに向いています。 ※ 個人、商用利用可能 Arona ※ 個人利用可能 Lineton Fon
文字がかっこいい！すごいPhotoshopテキストエフェクト厳選120個まとめ【2024年版】
文字を入力して、ほんの数クリックで魅力的な加工ができる、Photoshopテキストエフェクト素材をまとめています。 ここで紹介する素材は、どれも無料ダウンロードできるのが大前提。 フォトショップさえあれば、だれでも簡単に、かっこいい文字をデザインできます。 英語フォントだけでなく、日本語フォントでも利用可能です。 ワンランク上の文字加工には、プレミアムPSD素材の利用も検討してみましょう。 素材の豊富さはもちろん、プロ級の仕上がりをほんの数クリックで実現できます。 文字テキストの編集、PSDファイルの使い方は？ 今回ご紹介するフリー素材の多くは、「スマートオブジェクト」機能を利用してカスタマイズします。 Adobe公式Photoshopヘルプページでは、スマートオブジェクトについて以下のように説明されています。 スマートオブジェクトは、Photoshop や Illustrator ファイ
Photoshopで差がつく、ハイクオリティな無料PSDデザイン素材48個まとめ
ウェブサイトやグラフィックデザインなど幅広い用途で活躍するPhotoshop。表現できるスタイルやエフェクトを増やしたい。そんなときは、手軽にお好みのデザインに編集できる、無料のPSDデザイン素材を活用してみましょう。 フリーフォントでカスタマイズしやすいロゴ、ポスター、イベントフライヤーなどのテンプレート素材の他にも、作品やアートワークの新しい魅せ方を提案できるモックアップ、写真加工用アイテムやフォント入力だけで完成のテキストエフェクト、パターン、グラデーションなど幅広いデザイン素材をまとめています。 文字フォントが一瞬で美しく！手の込んだPhotoshopテキストエフェクト素材30個まとめ Photoshopで差がつく、ハイクオリティな無料PSDデザイン素材まとめ Free Gold Paint Photoshop Effect リアルな黄金ペイントをボタンひとつで表現できる、Phot
無料で高品質！デザインがグッと良くなる厳選テクスチャ素材58個まとめ
あらゆるデザインで重宝する「テクスチャ」素材。背景デザインとしてそのまま使うのはもちろん、重ねて利用するだけでビンテージなど異なる風合いを演出できるアイテムなど、テクスチャ素材の種類や用途もさまざまです。 今回は、無料ダウンロードできて実用性の高いテクスチャ素材のみを厳選してご紹介します。人気が高まっている手書きや水彩ペイント、高級感のあるのキラキラ素材、和紙や日本の墨流しなどの他に、普段使いにオススメのウッドや紙、グランジテクスチャなど幅広いセレクションが揃います 。 無料で高品質！デザインがグッと良くなる厳選テクスチャ素材まとめ Natural Vector Texture オーガニックでナチュラルな風合いを演出できるベクターテクスチャ素材で、そのままデザインにも利用できるスタイリッシュな見た目に注目。 10 Luxury Gold Marble Textures 高級感のある金色の大
Illustratorはここまで進化！しっかり学ぶ最新チュートリアルやテクニックまとめ
先日30周年を迎えた、デザインの現場に欠かせない定番ソフト Illustrator（イラストレーター）。CCになってからはアップデートも頻繁に行なわれており、よりいっそうデザインが容易になっています。 今回は、Illustrator の機能やエフェクトの使い方を覚えながらデザインできるチュートリアルや作り方、テクニックをまとめてご紹介します。Illustrator初心者のひとはもちろん、普段から使っているベテランも、目から鱗な新しいテクニックが多数公開されています。デザイン制作をよりスムーズに行うコツを学びましょう。 知識ゼロから Illustrator をしっかり学ぶ！デザインの作り方、チュートリアルまとめ Illustratorはここまで進化！しっかり学ぶ最新チュートリアルやテクニックまとめ シロップのかかったパンケーキをデザインする方法 できたての美味しそうなホットケーキで、Phot
商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 Adobe Fontsの手書きフォント（8個） 和文、日本語の手書きナチュラル・フリーフォント（73個） 英語の手書きプレミアムフォント（16個） 英語の手書きナチュラル・フリーフォント（72個） 現在、169個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フォントをまとめてダウン
デザインがグッと良くなる、持っておきたいフリーフォント素材50個まとめ 2017年2月度
毎月新しく公開された高品質なフリーフォント素材をまとめてご紹介しています、今回は2017年2月度のまとめとなります。 デザインの雰囲気をガラリと変える日本語フリーフォントから、グラフィックデザインで重宝しそうなスタイリッシュな英文フリーフォント素材まで幅広く揃えています。いつも同じ書体ばかり利用してしまい、デザインの可能性を引き出したいときに活用し、お手持ちのフォントコレクションに追加してみてはいかがでしょう。 テーマ、目的別に探す！合計2000個のフリーフォント素材まとめ完全版 無料ダウンロードし放題！商用OKなフリーフォント50個まとめ 2017年1月度 デザインがグッと良くなる、持っておきたいフリーフォント素材まとめ Hype Free Font シンプルで使い勝手の良いサンセリフ書体のフリーフォント。 ※ 個人、商用利用可能 Noway 文字の美しさと機能的な使いやすいさを実現した
注目度アップ！画面を二分割するWebサイトの制作ポイントまとめ（参考テンプレート付）
画面を縦半分に二分割した「スプリット・スクリーン（英: Split Screen）」デザインの利用がウェブサイトで増えてきています。このレイアウトは、「ひとつの画面に2つのメッセージ」というシンプルなルールだけです。 各パネルには写真イメージや文字テキスト、イラストなど異なるさまざまな要素を配置できるのが特長のレイアウトです。 シンプルとなってきているグラフィックのデザイントレンドに比べ、画面を2つに分割することは、よりユニークな方法でサイトへの興味を引くことができます。もう少し詳しく見ると、以下のような利点があります。 特定のパートにユーザーの注意を引きつける。 コントラストをうまく利用できる。 これまでにないスタイルを提供できる。 また、あらゆる画面サイズに対応する、レスポンシブデザインにとっても良い選択と言えるでしょう。このタイプのレイアウトは、大画面やタブレットでの表示が特におすす
プロ級の写真加工がボタンひとつ！良質Photoshopアクション素材まとめ
「自分で撮影した写真を加工したいけど、やり方がよく分からない。」そんなときは、写真加工における一連の手順を再生ボタンひとつで完了させる、アクション機能を利用してみましょう。お気に入りの写真を魅力的にアレンジできます。 複数の写真を同じエフェクトで揃えたいときなど、繰り返し作業を繰り返す必要がなく、効率的にデザインを進めることができます。今回は、無料で利用できるフォトショップ用アクション素材をまとめてご紹介します。 普段使いできるシンプルな素材から、多重露光やデュオトーンなどの人気スタイルの他に、複雑なグラフィックを表現するクリエイティブなものまで幅広く揃っています。 ワンクリックで写真処理を完成できる！優良Photoshopアクションファイルまとめ 写真加工テクを上達させる！すごい無料Photoshopアクション素材まとめ ワンクリックでプロ級の写真加工ができる良質Photoshopアクシ
知識ゼロから Illustrator をしっかり学ぶ！デザインの作り方、チュートリアルまとめ
「もっと楽な方法は？」「イラストレーターの効率的な使い方を知りたい。」 そんな悩みを解決してくれる Illustrator の基本操作から各ツールの実践テクニックまで、これからをはじめようというひとにもオススメの機能を網羅した、新作デザインチュートリアルをまとめてご紹介します。 ステップごとに進めていくので迷うこともなく、各種ツールのより実践的な使い方まで詳しく知ることができるチュートリアルを中心に揃えています。Illutrator の可能性を広げる万能テクニックを学んでみてはいかがでしょう。 詳細は以下から。 知識ゼロから Illustrator をしっかり学ぶデザインの作り方、チュートリアルまとめ カラフルな花がらの水墨画をデザインする方法 グラデーションメッシュ機能を利用し、Illustrator ではむずかしい淡い色合いを表現できるチュートリアル。 幾何学模様を利用した雪の結晶の作
商用可！レトロでおしゃれな無料フォント決定版（日本語・英語）
※ 新しいフォントを追加、古くなったリンク切れは削除し、およそ1年ぶりのアップデート。現在、合計240個。 「レトロ＆ヴィンテージ」なデザインをお探しですか。 利用したいフォント素材を、なかなか見つけることができなかったので、日本語と英語に分けて、整理し直しました。 2016年からアップデートを継続している、今年で9年目の隠しリスト。 無料ダウンロードできて、商用利用も可能なフリーフォント素材をまとめています。 「昭和レトロ」や９０年代、Y2Kデザイン、ヴィンテージやアンティークを得意とした書体まで、あらゆるレトロなフリーフォントを集めています。 ※ すべて無料ダウンロードでき、商用ライセンスに対応していますが、ご利用の前に、もう一度を確認するようお願いします。
ずっと使える、デザインの基本まとめました。【2020年改訂版】
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料デザイン素材 アーカイブ - PhotoshopVIP
HTMLテンプレート アーカイブ - PhotoshopVIP
