ウェブデザイン

: Webディレクターの仕事

スマホのデザインをPCにも転用したWebサイト事例集

2024/2/20 ウェブディレクター, ウェブデザイン

最近のWebサイトには、PC版のレイアウトを作成せず、スマホの構成をそのままパソコンにも採用するケースが増えてきている。個人的に、これは非常に理にかなっていると思う。その理由は以下のとおりだ。 PC ...

: ITツール

フォント探しの決定版「SANKOU! font」｜目的やデザインからフォントを検索できるWebサービス

2023/11/21 ウェブサービス, ウェブデザイン, フォント

はじめに参考サイトを探せるWebサイト「SANKOU!」。Webディレクターとして活動している私にとって、大変お世話になっているサービスのひとつです。ただ、今日の主役は「参考サイト探し」ではなく「 ...

: ITツール

ColorMagic：AIが言葉からおすすめの配色を提案してくれる

2023/2/15 AI, ウェブサービス, ウェブデザイン, デザイン

資料作成やウェブサイトのデザイン作成など、色の組み合わせを考えるのはなかなかに難しい。しかしこのウェブアプリなら、配色を考えるためのヒントになってくれる。 ColorMagic。 ColorMagic ...

: ITツール

XDでニューモーフィズムデザインを作る方法！パターン別4種類の作り方

2022/6/22 XD, ウェブデザイン

「ニューモーフィズム」というデザイン手法をご存知だろうか。明暗2色のドロップシャドウを使い、オブジェクトを、浮き上がらせたり、くぼんでいるように見せる手法だ。 XDを使って、これらのデザインを簡単に再 ...

: ITツール

【XD】テキスト文字の色をグラデーションにする方法【簡単3ステップ】

2022/6/3 XD, ウェブデザイン, 日本一やさしいXDの教科書

XDの利用用途は広く、デザインソフトとしても十分に活躍できるポテンシャルを秘めている。実際、最近のWebサイトのデザインはXDで制作することが多い。さて、今日はそんなXDのちょっとしたテクニックをひ ...

: ITツール

画像の中で使われている色のカラーコードを取得するのにオススメのWebツール

2022/4/11 ウェブサービス, ウェブデザイン

画像のなかで使われているカラーコードを取得したい。そんなときに重宝しているWebツールがある。しかも、その画像で使われているカラーコードが一覧で表示されるだけじゃない。画像で実際に使われている色とカ ...

: ITツール

HTMLの自動整形＆エラーチェックならウェブ版Prettierが手軽でオススメ

2022/2/25 ウェブアプリ, ウェブサービス, ウェブディレクター, ウェブデザイン

バラバラになってしまったHTMLのインデントを一発で整理したい。閉じタグが漏れていないかチェックしたい。そんなときに便利なWebツールが「Prettier」です。これはもともと、コードエディターで ...

: ITツール

【storyset】センス溢れる無料イラスト素材集！アニメーションも作れる

2021/11/27 ウェブサービス, ウェブデザイン

Webデザインやブログのアイキャッチなどで使える、無料のロイヤリティフリー素材は、いくつあっても困ることはありません。さて。今日お話するのは「storyset」というイラスト素材サイト。無料で使える ...

: ITツール

【O-DAN】無料で商用利用可な写真素材を複数のサイトにまたがって検索するハブサイト

2021/10/28 ウェブサービス, ウェブデザイン, 写真

今日は非常に便利なWebサイトのご紹介。特に、ご自身でブログをやられていたり、Webの制作に関わっている人にとっては、重宝するサイトかと思います。名前は「O-DAN（オーダン）」。世界中の無料写真 ...

: ITツール Webディレクターの仕事

【XD】デザイン確認用URLは最後に「?fullscreen」を付けてコーディング後の大規模修正を回避せよ

2021/10/13 XD, ウェブサービス, ウェブディレクター, ウェブデザイン

Webサイトの制作をしているなかで、XDでデザインを制作することは、最近ではスタンダードになってきた。私の身の回りでは、Photoshopでの制作よりもXDのほうが多いぐらいだ。さて、そのなかでよく ...

: ITツール

Web担への挑戦！Can't Unsee で自分のUIデザインレベルをテストしよう

2021/7/10 ウェブサービス, ウェブディレクター, ウェブデザイン

ウェブサイト「Can't Unsee」では、ウェブサイトやアプリのUIについて、自分のレベルを測ることができる。 Can't Unsee A game where you need to pick t ...

: Webディレクターの仕事

画像を最適化する3つの手法！最も手軽で効果的なサイトパフォーマンス改善施策とは

2021/4/16 WebP, ウェブディレクター, ウェブデザイン, サイト分析, パフォーマンス改善

Webサイトのパフォーマンス改善をしたい！1秒でも早くページが表示されるように、いろんな施策を実施したい！けれども、すでに公開・運用しているサイトにテコ入れをするのが難しく、具体的なアクションにまで ...

: Webディレクターの仕事

WebP(ウェッピー) でサイト制作をする際の手順と注意点

2021/4/7 WebP, ウェブデザイン

今回はWebP（ウェッピー）を使ったウェブサイト制作を進める上で、必要な手順や注意点についてまとめました。 Googleが開発した画像フォーマット「WebP（ウェッピー）」。圧縮率が高いので、大きく ...

: Webディレクターの仕事

デザインヒアリングシートでクライアントのイメージを形にしよう

2021/1/31 ウェブディレクター, ウェブデザイン, デザイン, 仕事で役立つ情報

ウェブディレクターを何年やってきても、コケるときは大きくコケてしまうのが、デザインだ。依頼した内容とできあがったデザインが違う。あるいは、クライアントが希望していたデザインと認識の齟齬がある。そうい ...

: Mac

【XD】フォントをアウトライン化する方法

2020/6/21 Adobe, Macアプリ, XD, ウェブディレクター, ウェブデザイン, ワイヤーフレーム, 日本一やさしいXDの教科書

XDでもフォントをアウトライン化することはできる。アウトライン化したい文字を選択した状態でcommand8を押すだけだ。どうしよう、この記事で言いたいことが終わってしまった。あとは「アウトラインと ...

: ITツール

黄金比や白銀比の計算が簡単にできるウェブツール「METALLIC RATIO」

2019/7/22 アイキャッチ, ウェブサービス, ウェブデザイン, デザイン

「美しく見える比率」というのが存在します。「黄金比（Golden Ratio）」が一番メジャーですが、その他にも「白金比（Platinum Ratio）」「白銀比（Silver Ratio）」「青銅比 ...

: ITツール Webディレクターの仕事

簡単！アプリ不要！画像をSVG変換するウェブツール「vectorizer」の使い方

2021/1/31 ウェブアプリ, ウェブサービス, ウェブディレクター, ウェブデザイン, デザイン, マークアップ, 仕事で役立つ情報

ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。 ...

: Mac Webディレクターの仕事 Windows

Excelで作った表をウェブで使えるHTMLに書き出す方法

2021/1/31 Excel, Mac, Windows, ウェブディレクター, ウェブデザイン, マークアップ, 仕事で役立つ情報

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそん ...

: Mac Webディレクターの仕事

Numbersで作った表をウェブで使えるHTMLに書き出す方法

2021/1/31 Mac, Macアプリ, Numbers, ウェブディレクター, ウェブデザイン, マークアップ, 仕事で役立つ情報

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Mac用のExcelソフト「Numbers」。これを使って作った表のデザインをそのままWebで展開できたら、 ...

: iPhone Webディレクターの仕事

ウェブサイトがアプリ化！PWAの特徴と対応サイト事例

2021/1/31 iPhone, iPhoneアプリ, ウェブサービス, ウェブディレクター, ウェブデザイン, スマートフォン, 仕事で役立つ情報

ウェブサイトをネイティブアプリのような感覚で使える技術が注目を集めています。「PWA（プログレッシブウェブアプリ）」と呼ぶんですけど、使ったことありますか？このPWAに対応したサイトでは、ページを表 ...