-
-
XDでニューモーフィズムデザインを作る方法!パターン別4種類の作り方
「ニューモーフィズム」というデザイン手法をご存知だろうか。明暗2色のドロップシャドウを使い、オブジェクトを、浮き上がらせたり、くぼんでいるように見せる手法だ。 XDを使って、これらのデザインを簡単に再 ...
-
-
【XD】テキスト文字の色をグラデーションにする方法【簡単3ステップ】
2022/6/3 XD, ウェブデザイン, 日本一やさしいXDの教科書
XDの利用用途は広く、デザインソフトとしても十分に活躍できるポテンシャルを秘めている。実際、最近のWebサイトのデザインはXDで制作することが多い。 さて、今日はそんなXDのちょっとしたテクニックをひ ...
-
-
画像の中で使われている色のカラーコードを取得するのにオススメのWebツール
画像のなかで使われているカラーコードを取得したい。そんなときに重宝しているWebツールがある。 しかも、その画像で使われているカラーコードが一覧で表示されるだけじゃない。画像で実際に使われている色とカ ...
-
-
HTMLの自動整形&エラーチェックならウェブ版Prettierが手軽でオススメ
バラバラになってしまったHTMLのインデントを一発で整理したい。閉じタグが漏れていないかチェックしたい。 そんなときに便利なWebツールが「Prettier」です。 これはもともと、コードエディターで ...
-
-
【storyset】センス溢れる無料イラスト素材集!アニメーションも作れる
Webデザインやブログのアイキャッチなどで使える、無料のロイヤリティフリー素材は、いくつあっても困ることはありません。 さて。今日お話するのは「storyset」というイラスト素材サイト。無料で使える ...
-
-
【O-DAN】無料で商用利用可な写真素材を複数のサイトにまたがって検索するハブサイト
今日は非常に便利なWebサイトのご紹介。特に、ご自身でブログをやられていたり、Webの制作に関わっている人にとっては、重宝するサイトかと思います。 名前は「O-DAN(オーダン)」。 世界中の無料写真 ...
-
-
【XD】デザイン確認用URLは最後に「?fullscreen」を付けてコーディング後の大規模修正を回避せよ
Webサイトの制作をしているなかで、XDでデザインを制作することは、最近ではスタンダードになってきた。私の身の回りでは、Photoshopでの制作よりもXDのほうが多いぐらいだ。 さて、そのなかでよく ...
-
-
Web担への挑戦!Can't Unsee で自分のUIデザインレベルをテストしよう
ウェブサイト「Can't Unsee」では、ウェブサイトやアプリのUIについて、自分のレベルを測ることができる。 Can't Unsee A game where you need to pick t ...
-
-
画像を最適化する3つの手法!最も手軽で効果的なサイトパフォーマンス改善施策とは
Webサイトのパフォーマンス改善をしたい!1秒でも早くページが表示されるように、いろんな施策を実施したい! けれども、すでに公開・運用しているサイトにテコ入れをするのが難しく、具体的なアクションにまで ...
-
-
WebP(ウェッピー) でサイト制作をする際の手順と注意点
今回はWebP(ウェッピー)を使ったウェブサイト制作を進める上で、必要な手順や注意点についてまとめました。 Googleが開発した画像フォーマット「WebP(ウェッピー)」。 圧縮率が高いので、大きく ...
-
-
デザインヒアリングシートでクライアントのイメージを形にしよう
ウェブディレクターを何年やってきても、コケるときは大きくコケてしまうのが、デザインだ。 依頼した内容とできあがったデザインが違う。あるいは、クライアントが希望していたデザインと認識の齟齬がある。そうい ...
-
-
【XD】フォントをアウトライン化する方法
XDでもフォントをアウトライン化することはできる。 アウトライン化したい文字を選択した状態でcommand8を押すだけだ。 どうしよう、この記事で言いたいことが終わってしまった。あとは「アウトラインと ...
-
-
黄金比や白銀比の計算が簡単にできるウェブツール「METALLIC RATIO」
「美しく見える比率」というのが存在します。「黄金比(Golden Ratio)」が一番メジャーですが、その他にも「白金比(Platinum Ratio)」「白銀比(Silver Ratio)」「青銅比 ...
-
-
簡単!アプリ不要!画像をSVG変換するウェブツール「vectorizer」の使い方
ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。 ...
-
-
Excelで作った表をウェブで使えるHTMLに書き出す方法
Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそん ...
-
-
Numbersで作った表をウェブで使えるHTMLに書き出す方法
Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Mac用のExcelソフト「Numbers」。これを使って作った表のデザインをそのままWebで展開できたら、 ...
-
-
ウェブサイトがアプリ化!PWAの特徴と対応サイト事例
ウェブサイトをネイティブアプリのような感覚で使える技術が注目を集めています。「PWA(プログレッシブウェブアプリ)」と呼ぶんですけど、使ったことありますか? このPWAに対応したサイトでは、ページを表 ...
-
-
最高品質なプロの写真が無料かつクレジット表記不要で使える画像集サイト「Unsplash」
プロの写真家が撮った写真を、無料で、クレジット表記も不要で使用できるとしたら、あなたは魅力を感じるでしょうか。 ブログで画像が必要になる私にとってはこれ以上ないほど贅沢な話なのですが、「Unsplas ...
-
-
美麗なグラデーションのサンプルCSSとPNGが大量に手に入るウェブサイト
あなたのウェブサイト制作やデザイン制作できっと役に立つ!グラデーションサンプルを集めたサイト「WebGradients」をご紹介します。 関連リンク:Fresh Background Gradient ...
-
-
ウェブページ内の直線位置や長さを測るのに超便利なChrome拡張機能「Page Ruler」
2021/1/31 GoogleChrome, ウェブディレクター, ウェブデザイン, 仕事で役立つ情報
今日は主にウェブ担当者向けの内容を。 ウェブページのデザインやコーディングをチェックをしていると、こんなことを考えたりします。 「AとBの要素、ちょっとずれてる気がするんだけど、本当に直線位置にあるか ...