Webデザイン

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

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

画像からフォント検索できるサービスを紹介 デザインでは、適切なフォント選びがアウトプットの印象を大きく左右します。しかし、フォントを選ぶのも大変な作業ですよね。デザインのために集めた参考画像で使われているフォントの名前を知りたいというケースも多いと思います。ここでは、画像からフォントを見つけ出すのに役立つ以下5つのサービスをご紹介します。 1. Adobe Fonts 2. What Font is 3. WhatTheFont 4. Adobe Capture 5. フォト

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

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

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

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

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

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

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

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

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

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

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