クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN

オンラインで本格的なロゴを作成できる「Logaster」で作成された9,000,000個の中から、2019年に人気だったロゴのデザインを調査・分析し、2020年に注目されるロゴデザインのトレンドを紹介します。 Logasterの中の人から依頼があり、今年も日本語化するお手伝いをさせていただきました。ここに掲載されているロゴのデザインは、小さいサイズならすべて無料で作成してダウンロードすることができます。 ※2022/10: Logasterは買収されました。 また、過去のトレンドと比較してみるのも、面白いです。 2018年、ロゴのデザイントレンドのまとめ 2019年、ロゴのデザイントレンドのまとめ 1. ロゴの単純化 デザインの単純化は今までのトレンドから、確立された哲学へと発展しました。すっきりとした構成により、ロゴの用途が広がり、実用性も向上しています。その結果、ロゴのミニマルなデザイ

シドニーを拠点に活躍しているプロのファッションカメラマン: Julia Trotti氏のトーンカーブのコレクションが無料でダウンロードできるので、紹介します。 まずは、トーンカーブファイルの利用方法を。 ダウンロードとインストールは簡単です。 各ページの左「download」からファイルをダウンロードし解凍、拡張子「.acv」がトーンカーブファイルです。 Photoshopのアプリケーションフォルダ内の「Presets/Curves」内にトーンカーブファイルを移動。これで準備は完了です。 トーンカーブを利用するのも簡単です。 Photoshopで画像を開きます。 メニューバーから「レイヤー: 新規調整レイヤー: トーンカーブ」を選択します。 トーンカーブのパネルの「プリセット」からトーンカーブを選択します。 ※ファイルがプリセットに無い場合 トーンカーブのパネルの右上のアイコンをクリックし

デザインのこつが分かる！確実に身につけておきたいプロ直伝の50のデザインテクニック -Pro Design Tips

WordPressの制作の準備、制作、公開、SEOやセキュリティやメンテナンスなど運用における、WordPressでサイトやブログを運営する際の大切なポイントをまとめたチェックリストを紹介します。 Killer WordPress Checklist: 101+ easy steps to launch your next website! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 チェックリストはインフォグラフィックにもなっており、元ページでダウンロードできます。 インフォグラフィックの一部 はじめに WordPressの制作準備時のチェックリスト WordPressの制作時のチェックリスト WordPressの公開時のチェックリスト WordPessのSEOのチェックリスト WordPessのセキュリティのチェックリスト W

Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造が正しいか確認 マークアップのいまいちな箇所を指摘してくれる 背景を素敵なテクスチャに変えてみたい ページのパフォーマンスを確認 minifyされたCSSを見やすく表示 SEOやソーシャルメディアに大切な項目を確認 コードとアクセシビリティをチェック ページにグリッドを表示した確認

有名ブランドで採用されているカラーをはじめ、Material DesignやiOS 8で採用されている落ち着いたパステル、同一色相の美しいグラデーションなど。 最近注目されているカラーをまとめたPhotoshopのスウォッチを紹介します。Illustrator用のもいくつかあります。 Color palette -Material Design 2015年、多くのWebデザイナーが注目しているMaterial Designで使用されているPhotoshopとIllsutrator用のスウォッチファイル。フラットなカラーと同一色相のグラデが特徴的です。

菱・籠目・雪輪・矢絣・唐草・亀甲・紗綾形などの和柄をはじめ、季節の風物詩や伝統的なものなど、日本の伝統に基づいたさまざまな無料ベクター素材を紹介します。 Japan Vector 素敵な和柄のフリー素材を探している人は、下記ページのまとめも参考にどうぞ。 商用利用無料、日本の伝統的な色使いが美しい和柄のパターン素材やテクスチャ素材のまとめ 素敵なグラフィックが多いので、管理者様にメールで連絡を取ってみました。 作成しているのは日本人のユニットで、すべてオリジナルの作品、少しずつ素材を増やしています、とのことでした。 素材の利用にあたっては個人でも商用でも無料、クレジットの表記は特に必要ないが記載してもらえると嬉しい、とのことです。 ダウンロードできる素材のフォーマットは、4種類。 .ai .eps .pdf .jpg（プレビュー用） 以下、数多くある素材の中からいくつか紹介します。 菊や桜

Googleで検索したり、Gmail, YouTube, Googleマップ、カレンダーなど、Googleのさまざまなサービスを利用する際に知っておくべき大切なURLを10個、紹介します。 Googleアカウントが使えなくなった時の設定とかしてありますか？ 10 URLs That Every Google User Should Know written by Digital Inspiration Googleのアカウントを作成・管理 広告の設定 Gmail, YouTube, カレンダーなどのデータを保存 違反コンテンツを見つけたらGoogleに報告 位置情報の管理 検索に使用した文字も記録されています Googleアカウントの使用を止めた後のデータの扱い 自分のGoogleアカウントを第三者が使っていないか調べる アカウントの権限を一括管理 Googleアカウントがハッキングされた

先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます（チートシートでは「c」がついています）。