Webデザイン
Webデザインに関する学習コンテンツや最新情報などのオリジナル記事を配信しています。
Webデザイン基礎編
Web Design Basics
最新の記事
Latest Articles
- 受賞歴多数の「Garden Eight」 国際的に評価される表現はどのように生まれるのか。CEO・野間寛貴氏に聞く前身のウェブ制作会社「レターズ」を経て、2011年から活動しているデジタルデザインスタジオ「Garden Eight」。国際的にすぐれたウェブサイトを表彰するAwwwardsやFWAなど多くの受賞歴があり、業界内で注目度の高い企業の一つです。 創業 当時から現在も7名と少数精鋭を貫く同社は、どのようにして国内外で評価される実績を輩出してきたのか。下北沢にあるオフィスを訪ね、CEOの野間寛貴氏にインタビューしました。 クリエイティブな表現に長けた少数チーム ―― 現在の運営体制を
- オンラインで使える無料の画像圧縮・軽量化ツール10選!画像軽量化ツールを一覧で紹介 この記事では、画像ファイルの圧縮ツールをご紹介します。 下記のサイトは、すべてブラウザから手軽に使用できるサイトです。また、JPEGやPNGだけでなく、Web用の高圧縮フォーマットであるWebPや、汎 用性の高いベクターデータフォーマットであるSVGなどに対応しているツールもあります。いずれも無料で使えるツールを厳選していますので、気になるサイトがあればチェックしてみてください。 | ツール名 | JPEG | PNG | WebP | GIF |
- 画像からフォントを検索できる!目的別のおすすめツール14選を紹介画像からフォント検索できるサービスを紹介 デザインでは、適切なフォント選びがアウトプットの印象を大きく左右します。しかし、フォントを選ぶのも大変な作業ですよね。デザインのために集めた参考画像で使われ ているフォントの名前を知りたいというケースも多いと思います。ここでは、画像からフォントを見つけ出すのに役立つ以下5つのサービスをご紹介します。 Adobe Fonts What Font is WhatTheFont Adobe Capture フォトからフォント検索 各サービスは
- Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介!近年はフォントのサブスクリプションサービス導入も増えて、さまざまな種類の日本語フォントをデザインに取り入れることが以前よりも容易になったのではないでしょうか?しかし、フォントファイルの配信が必要なWebフォントとし ての利用には、サービス提供者によるサブスクリプションサービスの導入が必要となる場合もあり、クライアントワークなどでは導入が難しい場合も多いですよね。このような時にも、無料のGoogle Fontsで提供されているフォントであれば安心してデザインに取り入れることができ
- 話題のノーコードツールとは?目的別のオススメツールも紹介ノーコードとは、プログラミングをしたり、コードを書かずにWebサイトやアプリケーションが開発できる手法のことです。IT人材の不足や開発費用の削減が求められる中で、ノーコードの利用は急速に広がっています。とくに、自社のプロダクトを持つ企業の営業企画部やマーケティング部署などで、低コスト・短納期での開発が必要とされるケースで効果を発揮します。 ノーコードツールとは? ノーコードツールとは、ドラッグ&ドロップなどの直感的な操作で、Webサイト制作やアプリケーション開発ができるツール
- Google製の画像圧縮・変換サービス『Squoosh』の使い方処理結果を確認しながら画像の変換・圧縮ができる『Squoosh』とは? Squoosh(スクワッシュ)とは、Googleが開発した画像変換・圧縮用のWebサービスで、変換前後の画像をリアルタイムで比較しながら設定を調整できるという特徴 があります。 Webで使用する画像サイズは軽ければ軽いほど良い一方、デザイン的な観点から画質もある程度担保したいというようなニーズも多いと思います。Squooshは、プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整すること
- アクセシビリティとは?Webサイト制作に役立つ10の項目を解説!アクセシビリティとは?サービスが「利用可能な状態」であること アクセシビリティとは、情報や機能の「利用可能性」を意味する言葉です。アクセシビリティが担保されているというと、利用者にとってその情報や機能が「利用可能な状態」を表し、逆にアクセシビリティが担保されていない状態とは、何らかの理由で特定のユーザーがその情報や機能を「利用できない状態」を表します。アクセシビリティは、デザインやビジネスの文脈において「どのような立場の利用者であっても商品・サービスを利用できること」を目指す
- WebPとは?高い圧縮率によるメリットを解説!変換ツールも紹介WebP(ウェッピー)とは? WebP(ウェッピー)とは、Googleが開発した画像フォーマットの一種で、Web上での利用に適している形式です。 高い圧縮率 背景透過に対応 アニメーションに対応 上記の特徴があるため、Webサイトの制作者やデザイナーにとって、効率的な画像管理と高い表現力を両立するための重要な選択肢となっています。 圧縮率が高く画像が軽量 WebP最大の特徴とも言えるのが、圧縮率が高く画像が軽量であることです。JPEGやPNGといった従来のフォーマットと比べて
- 【2024下半期】Webデザイナーにおすすめの資格6選!必要なスキルや勉強の仕方をご紹介Webデザインを仕事にするうえで、資格は必要なのでしょうか?本記事では 、Webデザインの資格の必要性・有利になる資格6選をご紹介します。将来性のあるWebデザイナーになるために必要なスキルについても解説します。 これからWebデザイナーを目指したい方 Webデザイナーとしてのキャリアアップをしたい方 フリーランスのWebデザイナーとして活躍したい方 におすすめの内容です。 Webデザイナーになるには資格が必要? 結論から言うと、Webデザイナーとして働くうえで、Webデザイン
- デザイナーも知っておくと安心!SEOに効果的な5つのWebデザインのポイントWebサイトに とって検索エンジンが重要なユーザー獲得経路であることはよく知られていると思います。しかし、WebサイトをデザインするデザイナーにはSEOに効果的なサイトの設計方法やデザインはあまり知られていないのではないでしょうか?デザイナーの中にも、「Webサイトをデザインする際にSEOに関する知識がなくて不安」という方は多いかと思います。今回は、そんなデザイナー向けに「デザイナーも知っておくと安心なSEOに効果的なWebデザインのポイント」を5つ紹介します。 大前提として、
- レスポンシブデザインを想定したWebサイトをデザインする時のポイントレスポンシブデザインとは? レスポンシブデザイン(レスポンシブWebデザインとも)とは、Webサイトを様々なサイズのデバイス環境に対応させるための技術です。WebサイトはHTMLで表示内容を記述し、CSSを使ってレイアウトや見た目を指定します。このCSSを画面サイズに合わせて変更させることで、同じWebサイトでありながら画面サイズに合わせた複数の見た目を表現することができるようになります。 レスポンシブデザイン vs アダプティブデザイン レスポンシブデザイン以外にWebサイ
- ワイヤーフレームとは?設計のポイントを詳しく解説ワイヤーフレームとは? ワイヤーフレームとは、Webサイトやモバイルアプリの画面ごとの構成要素を定めた設計図です。プロダクトの情報設計の段階でのチーム内での合意形成や、デザイナーへの指示書としての役割を持つことが多いです。近年のITサービス開発の現場では、具体的なデザインを作成する前にモックアップでのユーザーテストを行うことが増えたことから、プロトタイプとしての役割を持つことも多くなっています。 ワイヤーフレームの3つの役割 プロジェクトの内容やチーム構成によっても異なります
- 情報設計(IA)とは?効 果的な情報設計のプロセスを具体例を交えて紹介情報設計とは?情報表示と動線 情報設計(Information Architecture / IA)とは、デザインが適切にユーザーに情報を伝えられるような情報表示と動線の設計のことです。ジャンルを問わず、デザインには常に目的が与えられており、単にわかりやすいだけではなく、その目的を果たす上で有効な設計を行うことが情報設計の重要なポイントとなります。 UIデザインと情報設計(IA)の違い IAと同じく情報表示や動線の設計を通して、ユーザーが目的を達成しやすいデザインを作るという
- Webデザインの基礎。デザインシステムやSEO知識でさらにレベルアップ!Webデザインとは? Webデザインとは、ブラウザを使って表示されるWebサイトのデザインとその制作プロセスのことを意味します。Webサイトが以前と比べ、ビジネス的な目的を強く持つようになった現在では、見た目の良いサイトを作るだけではなく、戦略的に成果を上げるようなWebデザインを設計するためのデザイン技術が求められるようになってきています。 UIデザインとの違い UIデザインとは、ユーザーがサービスをスムーズに使い、その価値を最大限に享受できるようにプロダクトの設計をするこ