Webデザイン

前身のウェブ制作会社「レターズ」を経て、2011年から活動しているデジタルデザインスタジオ「Garden Eight」。国際的にすぐれたウェブサイトを表彰するAwwwardsやFWAなど多くの受賞歴があり、業界内で注目度の高い企業の一つです。創業当時から現在も7名と少数精鋭を貫く同社は、どのようにして国内外で評価される実績を輩出してきたのか。下北沢にあるオフィスを訪ね、CEOの野間寛貴氏にインタビューしました。―― 現在の運営体制を教えてください。創業当時からメンバーは、ほぼ変わりません。現在は

この記事では、画像ファイルの圧縮ツールをご紹介します。下記のサイトは、すべてブラウザから手軽に使用できるサイトです。また、JPEGやPNGだけでなく、Web用の高圧縮フォーマットであるWebPや、汎用性の高いベクターデータフォーマットであるSVGなどに対応しているツールもあります。いずれも無料で使えるツールを厳選していますので、気になるサイトがあればチェックしてみてください。ツール名JPEGPNGWebPGIFSVGBMPAVIFPDF概要Squoosh〇〇〇 〇 Googleが開発した画像

デザインでは、適切なフォント選びがアウトプットの印象を大きく左右します。しかし、フォントを選ぶのも大変な作業ですよね。デザインのために集めた参考画像で使われているフォントの名前を知りたいというケースも多いと思います。ここでは、画像からフォントを見つけ出すのに役立つ以下5つのサービスをご紹介します。Adobe FontsWhat Font isWhatTheFontAdobe Captureフォトからフォント検索各サービスは提供形態や対応言語、特徴などが異なりますので、自分のニーズに合ったものを見

近年はフォントのサブスクリプションサービス導入も増えて、さまざまな種類の日本語フォントをデザインに取り入れることが以前よりも容易になったのではないでしょうか？しかし、フォントファイルの配信が必要なWebフォントとしての利用には、サービス提供者によるサブスクリプションサービスの導入が必要となる場合もあり、クライアントワークなどでは導入が難しい場合も多いですよね。このような時にも、無料のGoogle Fontsで提供されているフォントであれば安心してデザインに取り入れることができます。この記事では、

ノーコードとは、プログラミングをしたり、コードを書かずにWebサイトやアプリケーションが開発できる手法のことです。IT人材の不足や開発費用の削減が求められる中で、ノーコードの利用は急速に広がっています。とくに、自社のプロダクトを持つ企業の営業企画部やマーケティング部署などで、低コスト・短納期での開発が必要とされるケースで効果を発揮します。ノーコードツールとは、ドラッグ＆ドロップなどの直感的な操作で、Webサイト制作やアプリケーション開発ができるツールのことを指します。たとえばデータベースの設計や

Squoosh（スクワッシュ）とは、Googleが開発した画像変換・圧縮用のWebサービスで、変換前後の画像をリアルタイムで比較しながら設定を調整できるという特徴があります。Webで使用する画像サイズは軽ければ軽いほど良い一方、デザイン的な観点から画質もある程度担保したいというようなニーズも多いと思います。Squooshは、プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができるので、ファイルサイズと画質の両面で最適な結果を得たい場合にとても便利です。Squoos

アクセシビリティとは、情報や機能の「利用可能性」を意味する言葉です。アクセシビリティが担保されているというと、利用者にとってその情報や機能が「利用可能な状態」を表し、逆にアクセシビリティが担保されていない状態とは、何らかの理由で特定のユーザーがその情報や機能を「利用できない状態」を表します。アクセシビリティは、デザインやビジネスの文脈において「どのような立場の利用者であっても商品・サービスを利用できること」を目指すための指標として重視されています。アクセシビリティが担保されていない場合、誰かにと

WebP（ウェッピー）とは、Googleが開発した画像フォーマットの一種で、Web上での利用に適している形式です。高い圧縮率背景透過に対応アニメーションに対応上記の特徴があるため、Webサイトの制作者やデザイナーにとって、効率的な画像管理と高い表現力を両立するための重要な選択肢となっています。WebP最大の特徴とも言えるのが、圧縮率が高く画像が軽量であることです。JPEGやPNGといった従来のフォーマットと比べて、同じ画質でもファイルサイズを大幅に削減できるため、Webページの読み込み速度が速く

Webデザインを仕事にするうえで、資格は必要なのでしょうか？本記事では、Webデザインの資格の必要性・有利になる資格6選をご紹介します。将来性のあるWebデザイナーになるために必要なスキルについても解説します。これからWebデザイナーを目指したい方Webデザイナーとしてのキャリアアップをしたい方フリーランスのWebデザイナーとして活躍したい方におすすめの内容です。結論から言うと、Webデザイナーとして働くうえで、Webデザインの資格は必須ではありません。しかし、Webデザインの資格を持っているこ

Webサイトにとって検索エンジンが重要なユーザー獲得経路であることはよく知られていると思います。しかし、WebサイトをデザインするデザイナーにはSEOに効果的なサイトの設計方法やデザインはあまり知られていないのではないでしょうか？デザイナーの中にも、「Webサイトをデザインする際にSEOに関する知識がなくて不安」という方は多いかと思います。今回は、そんなデザイナー向けに「デザイナーも知っておくと安心なSEOに効果的なWebデザインのポイント」を5つ紹介します。まず、大前提としてGoogleは「ユ

レスポンシブデザイン（レスポンシブWebデザインとも）とは、Webサイトを様々なサイズのデバイス環境に対応させるための技術です。WebサイトはHTMLで表示内容を記述し、CSSを使ってレイアウトや見た目を指定します。このCSSを画面サイズに合わせて変更させることで、同じWebサイトでありながら画面サイズに合わせた複数の見た目を表現することができるようになります。レスポンシブデザイン以外にWebサイトを様々なデバイス環境に対応させるための方法として、アダプティブデザインがあります。アダプティブデザ

ワイヤーフレームとは、Webサイトやモバイルアプリの画面ごとの構成要素を定めた設計図です。プロダクトの情報設計の段階でのチーム内での合意形成や、デザイナーへの指示書としての役割を持つことが多いです。近年のITサービス開発の現場では、具体的なデザインを作成する前にモックアップでのユーザーテストを行うことが増えたことから、プロトタイプとしての役割を持つことも多くなっています。プロジェクトの内容やチーム構成によっても異なりますが、ワイヤーフレームの役割には大きく、「仕様書・設計図」「合意形成ツール」「

情報設計（Information Architecture / IA）とは、デザインが適切にユーザーに情報を伝えられるような情報表示と動線の設計のことです。ジャンルを問わず、デザインには常に目的が与えられており、単にわかりやすいだけではなく、その目的を果たす上で有効な設計を行うことが情報設計の重要なポイントとなります。IAと同じく情報表示や動線の設計を通して、ユーザーが目的を達成しやすいデザインを作るという意味合いで使われる言葉にUIデザインがあります。UIデザインとは、ユーザーがサービスをスム

Webデザインとは、ブラウザを使って表示されるWebサイトのデザインとその制作プロセスのことを意味します。Webサイトが以前と比べ、ビジネス的な目的を強く持つようになった現在では、見た目の良いサイトを作るだけではなく、戦略的に成果を上げるようなWebデザインを設計するためのデザイン技術が求められるようになってきています。UIデザインとは、ユーザーがサービスをスムーズに使い、その価値を最大限に享受できるようにプロダクトの設計をすることを意味します。こちらは、情報の提供が主な目的となるようなWebサ