【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
これは便利！ありそうでなかった最新Web、オンラインツール36選
この記事では、「それ、何使ってるの？」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。 めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. アイコンツール 4. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Make Way Grid Effect 一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。 CSS Shadow Gradients 2色の配色によるグラデーションをつかった影、シャドウグ
本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個
モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-items: centerを使えば、思ったよりに簡単に実現できます。 まず、display: gridを記述したら、一緒にplace-items: centerを同じ要素に追加します。place-itemsは、align-itemsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-itemsとjustify-itemsの両方がcenterとして設定されます。 .paren
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
商用OKで用途自由！デザイン力を上げる極上テクスチャ、パターン素材集 The Ultimate Textures Bundle
テクスチャ素材は、あらゆるデザイン制作に役立つ素材のひとつで、グラフィックデザインはもちろん、ブランディングや印刷媒体などスタイリッシュで美しいスタイルを表現できます。 しかし、プロ仕様の高品質なテクスチャ素材を探すのは大変な作業で、ゼロから作成するとなると時間がかかるのも事実。そんな時は、世界中のトップデザイナーがタッグを組んだ、期間限定のテクスチャ素材集「The Ultimate Textures, Patterns, and Backgrounds Bundle」を活用することで、すぐにデザインにも応用でき、制作時間を短縮することができます。 このデザイン素材集は、商用ライセンス付きで、クライアント向け案件や商品デザインなどにも活用することができます。通常総額23万円の99%オフ、3,200円で2週間の期間限定で販売中です。 購入ページへ進む どんなプロジェクトにも対応できる高品質さ
これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ
この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作成できるツールもあります。覚えようと思ってなかなか手がつかなかったひとも、これならすぐにはじめることができますよ。 CSS Gridの使い方ガイド、チートシート、ゲームまとめ Grid Garden CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。 Bonus – CSS Dine
これが欲しかった！無料のすごいフリーフォント55選 2018年10月度 - PhotoshopVIP
世界中で公開されているたくさんのフリーフォントですが、「数が多すぎてどれを使えばいいのか迷ってしまう。」と思ったことがあるひとも多いのではないでしょうか。当サイトでは、無料ダウンロードできる高品質フリーフォントを厳選ピックアップし、定期的にご紹介しています。 どんなデザイン案件にも使いやすい万能フォントから、デザイントレンドの手書きブラシフォントや、人気の高い筆記体など幅広いセレクションから揃えています。商用利用も可能な素材も数多く揃い、利用ライセンスも一緒にまとめていますが、参照元ページを一度確認してご利用ください。 2週間限定！日本語プレミアムフォント、かわいいデザインを楽しむ便利コレクション これが欲しかった！無料のすごいフリーフォント55選 女子文字POP体フォント「モッチーポップ」 女子が書いたモチモチしてコロコロ丸っこい字でポップなフォントを目指して作りました。職場の新卒3年目
デザイナーが持っていたい、すごいフリーフォント素材46個まとめ 2019年1月度
当サイトでは、新しく公開されたフリーフォント素材をまとめて定期的にご紹介しています。2019年もいつの間にか1ヶ月が過ぎようとし、すでに多くのフリーフォントが公開されはじめています。 今回は、無料ダウンロードできる高品質な新作フリーフォント素材46個をまとめてご紹介します。 美しい日本語フリーフォントにはじまり、異なる太さの揃った実用プロフォント、新トレンドのビンテージ風フォント、手書きのブラシフォントや筆記体など、幅広いセレクションが揃います。 商用可で完全無料！2018年公開のフリーフォント素材132個総まとめ デザイナーが持っていたい、すごいフリーフォント素材まとめ 廻募（エモ） Adobeのオープンソースフォントファミリー「源ノ明朝」を元に、深夜1時に勢いでプログラムを利用して作成されたそう。 ※ 個人、商用利用可能 姫明朝ともえごぜん 優しくて、芯の強い姫のような女性をイメージし
Photoshopで写真内の人や物を消す6個の超簡単テクニック 完全まとめ
最終更新日: 2022年10月3日 Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作業を行っているというひとは、どれだけいるでしょう。 今回は、Photoshopの各種ツールを駆使した除去、消去テクニックと、いつその技を使うのがベストなのか、各サンプルと一緒にまとめてご紹介します。これらの方法を実践することで、写真に写り込んでしまった不要なモノを、2〜3分の短時間で、スピーディーに除去することができるので、フォトショップ初心者のひとにもオススメです。
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
超簡単！Photoshopで写真を今どきのデュオトーンに加工する方法（無料グラデーション収録）
ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトーン（英: Duotone）です。 デュオトーンとは、２色（Duo）の色合い（Tone）から構成されたデザインを指し、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルの作品が分かりやすいでしょう。 今回は、たった2ステップで手軽にデュオトーンを作成できる Photoshop チュートリアルをご紹介します。また、ダウンロードしてすぐに使える、デュオトーンエフェクトに適した無料グラデーションファイル10個セットも、記事の後半で公開しています。 詳細は以下から。 Photoshopで写真を今どきのデュオトーンに加工する方法 ステップ1: 加工する写真を開こう。 まずはデュオトーン・エフェクトを加えたい写真を P
ウェブデザイナーが試したい、Webアニメーション無料プラグイン＆ライブラリ75個まとめ【保存版】
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
CSSで実現！目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ
普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーションエフェクトは、デザイン的な見た目だけでなく、画像やハイパーリンクのクリックしやすさなど、ユーザビリティや操作性を大幅に改善することができます。 今回は、ユーザーの印象に残る効果的なホバーエフェクト用HTML/CSSスニペットをまとめてご紹介します。 HTML/CSSのみでスタイリングされたスニペットも多く、自由にカスタマイズできるだけでなく、コピペでサイトに利用することも可能です。ユーザーのハートをがっちり掴むエフェクトを、今後のプロジェクトに活かしてみてはいかがでしょう。 コピペ可ですぐに役立つ！マテリアルデザインを極めるHTML/CSSスニペット30個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニ
デザインの腕が上がる、すごい新作フリーフォント50個まとめ 2017年6月度
見ているだけで楽しくなる、個性豊かな新作フリーフォントをまとめています。個人利用、商用利用の可否についても一緒に記載しているので、デザインの目的に合った書体をスムーズに見つけることができます。 豊富なウエイトが揃ったシンプルな万能フォントから、トレンドを意識した手書きブラシフォント、読みやすさにもこだわった筆記体など幅広いバラエティが用意されているので、今後のデザイン案件に活用してみてはいかがでしょう。 デザイナーが愛用したい！こだわりの新作フリーフォント60書体まとめ 2017年5月度 デザインの腕が上がる、すごい新作フリーフォントまとめ Wavehaus Sans Typeface 太さの異なる極細から太字まで6ウエイトが揃ったサンセリフ書体は、使い勝手のよい万能スタイル。 ※ 個人、商用利用可能 Chlakh 手書きされたレトロ系フリーフォントで、温かみのあるデザインに仕上げます。
Webサイトのヘッダー/フッター用アイデア満載！コピペできるHTML/CSSスニペット48個まとめ
ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。 今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 コンテンツ目次 1. 記事向けヘッダーデザイン 2. 記事向けフルスクリーン・ヘッダ
ビジュアルデザインに必要な10の基本原則まとめ
ビジュアルデザインを学ぶうえでもっとも基本的なルール、原則10個を、現役ビジュアルデザイナーの José Torre が詳しく紹介しているので今回はご紹介します。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 ビジュアルデザインに必要な10の基本原則まとめ #1 ポイント、ライン、シェイプ 点（英: Point）、線（英: Line）、形（英: Shape）は、どんなデザインにおいてもっとも基本的な構成要素です。シンプルなアイコンから複雑なイラストまで、これらの要素を組み合わせることでどんなデザインでも作成できます。 幾何学（英: Geometry）としては、ポイントはX座標とY座標の組み合わせで、Z軸を追加することで3Dになりますが、今回は２次元デザインについて詳しく知りましょう。 ふたつのポイントをつなげると線になり、無数の点でできた線を組み合わせることで、どんな形で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】シンプルでミニマルな英語フリーフォント厳選98個まとめ 商用可
