CSS

CSSのリスト（list-style-image）で画像を使う方法【初心者向け】

初心者向けにCSSでリストに画像を使う方法について解説しています。リストはテキストが頭文字につけられますが、これを画像にすることも出来ます。ul要素やli要素に対してlist-style-image属性に画像を指定します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

CSSでリストに画像を使う方法について解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

CSSでリストに画像を使う方法について詳しく説明していくね！

お願いします！

リストに画像を使う方法

list-styleにはいくつか種類がありますが、画像などで凝ったリストのデザインを作りたいとき、使えるプロパティがあります。それは、list-style-imageです。

ulに当てた場合は全てのliに適用され、liに当てた場合はそのliにのみ適用されます。

実際に書いてみよう

HTML

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

CSS

ul{
  list-style-image: url(images/icon.png);
}

この記事を監修してくれた方

和田祥子（わださちこ）
フリーランスのWebデザイナー7年目です。Ruby勉強中。

テニスと音楽とビールが好きです。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

スマホ対応に便利！CSSのbox-sizingの使い方【初心者向け】

CSSで書くbox-sizingの使い方について解説する記事です。 Webデザインをする上で、今や必須となったスマホ画面への対応にも便利です。 bo...

CSS

CSSでline-hightを使って行間を指定する方法【初心者向け】

CSS初心者向けに、line-hightを使って行間を指定する方法を解説する記事です。 CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みく...

CSS

CSSの疑似要素を現役エンジニアが解説【初心者向け】

CSSの疑似要素について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分...

CSS

CSSのtable内のセルを縦横方向に結合する方法を現役デザイナーが解説【初心者向け】

CSSのtable内のセルを縦横方向に結合する方法について解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事...

CSS

CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

CSSの軽量フレームワーク10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

【綺麗に見せたい！】CSSでグラデーションを付ける方法【初心者向け】現役エンジニアが解説

CSSでグラデーションをつける方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

CSS

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Webデザインで副業する学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。

Webデザイン

大阪のIT・情報系専門学校18選｜自分に合った学校の選び方も解説

今回は大阪中心部のIT・情報系の専門学校をまとめました。資格やスキルなど特化した学校もあるため、自分に合った学校を見つけましょう。田島悠介今回は、なにか相談受けたんだって？大石ゆかり大阪に住んでる親戚がIT系の専門学校に通いたいって言ったんですが・・・どこを選べばいいかわからなくて・・・田島悠介よし！それじゃ、自分にあったIT系専門学校の選び方と大阪にある学校を紹介していくね！大石ゆかりお願いします！目次自分に合った学校の選び方学費を抑えられる学校資格が充実している学校プログラミングを学習できる学校実習の多い学校就職サポートが充実している学校まとめ自分に合った学校の選び方これからIT系の知識・スキルを習得したいと考えている方は多いでしょう。 IT系の専門学校に興味を持ってもどの専門学校に入学すれば良いのか、自分にはどの専門学校が合っているのか考えることは難しいです。本記事では以下のポイントに注目して大阪のIT系専門学校をまとめました。学費を抑えたい就職・転職の際の強みになる資格を取得したいプログラミングスキルを習得したい実習などで経験を積んで即戦力として活躍したい就職実績が良く、安心して就職・転職をしたい自分の目的に合った専門学校選びの参考にしてみましょう。 [PR] Webデザインで副業する学習方法を動画で公開中学費を抑えられる学校学費を抑えながら通える学校についてみていきましょう。 JOHO大阪情報専門学校画像引用元：https://www.ocs.ac.jp/field/university/system.html 概要/特色 1年次学費が110万円を切っており、他の専門学校と比較して低料金低学費でありながら、大卒資格が得られる学科もあり学習コスパが高い AIを開発できるPythonが学べる JOHO大阪情報専門学校は学費が安価であるだけでなく、就職先にエンジニアが多数いることからノウハウは確かなものだといえます。 PythonやHTMLなど多様な言語を学ぶことが可能です。区分私立（学校法人電子開発学園グループ）学費入学選考料 1.5万円入学金 15.0万円授業料 58.8万円施設費 27.6万円実習費専門学校Webサイトに記載なし教材費２～5万円程度校友会費専門学校Webサイトに記載なし校費 2.0万円レクリエーション費 2.0万円 1年次合計 106.9万円卒業後の進路【内定職種】ネットワークエンジニアデータベースエンジニアセキュリティエンジニアシステムエンジニアプログラマゲームクリエイター Webプログラマー CGエンジニアゲームプログラマーその他【内定就職先】 HTKエンジニアリング SCSKサービスウェア旭情報サービス TDCソフトその他多数コース一覧【学科・コース】学科コース大学併修学科（4年）大学システム専攻大学ゲーム専攻ソフトウェア開発学科（3年）システム専攻（3年） AIプログラム専攻（3年）プログラム専攻（2年）ゲームクリエイト専攻（3年）ゲームプログラム専攻（2年）ソフトウェア制作学科（2年）パソコン応用学科（2年） ITライセンス学科（1年） ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML 情報セキュリティスペシャリスト CSS ネットワークスペシャリスト Java データベースペシャリスト JavaScript 情報セキュリティマネジメント C言語応用情報技術者 Python 基本情報技術者その他オラクルマスター CCNP（シスコ認定ネットワーク技術者プロフェッショナル） CG クリエイター検定 Web デザイナー検定 CG エンジニア検定情報検定（J検）マルチメディア検定その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）入学難易度面接選考があるため、入学に対しては対策が必要です。入学難易度としては、筆記選考がないため、低めだといえます。住所大阪市東成区中本1-5-21 専門学校WebサイトURL：https://www.ocs.ac.jp/ ユービック情報専門学校画像引用元：http://www.ubik.ac.jp/gakka_course_explain/ 概要/特色 1年次学費が110万円を切っており、他の専門学校と比較して低料金ロボット関係まで学べる C言語やPythonなど習得できるプログラミング言語が多数ユービック情報専門学校は学費の安さに加えて、授業を通して学べるプログラミングが多数ある点が特徴的な専門学校です。区分私立（学校法人東洋学園）学費入学選考料 0.5万円入学金 10.0万円初年度学費 63.0万円施設費 17.0万円実習費 15.0万円 1年次合計 105.5万円卒業後の進路【内定職種】システムエンジニアプログラマーロボットエンジニアその他【内定就職先】株式会社アルプス技研株式会社ワールドインテックダイシン物流その他多数コース一覧【学科・コース】学科コースデジタル制御システム学科（3年） IoTエンジニアコースビジネス情報システム学科（3年）ビジネス情報コース情報学科（3年） ICTエンジニアコース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 C言語基本情報技術者試験 Java 応用情報技術者試験アセンブラ ITパスポート試験 PHP LPI認定試験 Python シスコ技術者認定 HTML インターネット検定 CSS 組み込みソフトウェア技術者 JavaScript エンベデッドシステムスペシャリスト SQL その他その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）筆記選考（状況に応じて実施）入学難易度面接選考があるため、入学には対策が必要です。入学難易度は基本的には筆記選考がないため、低めだといえるでしょう。。住所大阪市都島区片町2-10-5 専門学校WebサイトURL：http://www.ubik.ac.jp/ 中央ＩＴビジネス専門学校画像引用元：http://www.gotogakuen.com/itb/whats/index.html 概要/特色 1年次学費が110万円を切っており、他の専門学校と比較して低料金 ITとビジネスのスキルを同時に学べる併修制度により短大卒資格を得られる中央ITビジネス専門学校はプログラミングを学べることに加えて、併修を活用することで短大卒業の資格を得られる専門学校です。区分私立（学校法人後藤学園）学費入学選考料 1.5万円入学金 10.0万円授業料 72.0万円施設費 5.0万円研修旅行費 21.0万円 1年次合計 109.5万円卒業後の進路【内定職種】専門学校Webサイトに記載ありませんでした。【内定就職先】専門学校Webサイトに記載ありませんでした。コース一覧【学科・コース】情報ビジネス学科コンピュータコース ※IT系の学科のみを記載しました。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML ホームページ作成検定 CSS データベース検定 JavaScript IT活用能力検定 SQL ITパスポート試験その他その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）小論文選考入学難易度面接選考と小論文選考があるため、入学難易度は低くはないため対策が必要です。住所大阪市東住吉区北田辺1-11-22 専門学校WebサイトURL：http://www.gotogakuen.com/itb/ 資格が充実している学校資格取得に対して力を入れている専門学校です。 OCA大阪デザイン＆IT専門学校画像引用元：https://www.oca.ac.jp/school/ 概要/特色国家資格からベンダー資格まで幅広く取得できる環境ホワイトハッカー認定試験など珍しい資格も取得可能カリキュラムが細かく設定されているため、より専門性の高い知識・スキルを習得可能 OCA大阪デザイン＆IT専門学校は非常に多くの資格取得を目指せる環境のある専門学校です。また、多数の資格に対応できるだけのスキルを培うことができる点も信頼できる点だといえるでしょう。区分私立（学校法人コミュニケーションアート）学費入学選考料 3万円入学金 10万円授業料 60万円施設費 35万円実習費 30万円教材費 3～6.5万円程度校友会費専門学校Webサイトに記載なし合宿等諸経費 1～6万円程度海外研修費 10万円健康管理費 2万円キャリア教育振興費 7万円 1年次合計約170万円卒業後の進路【内定職種】 AIエンジニア AIコンサルタント AIエバンジェリストシステムエンジニアサーバエンジニアネットワークエンジニアデータサイエンティストセキュリティエンジニアゲームプログラマゲームディレクターゲームプランナーグラフィックデザイナー CIデザイナー Webデザイナーその他【内定就職先】デジタル・メディア・ラボグラフィニカモノリスソフトアド近鉄その他多数コース一覧【学科・コース】学科コーススーパーゲームIT科 AIクリエイター専攻（4年）ホワイトハッカー専攻（4年）スタートアップ専攻（4年）ゲーム・CGクリエイター科スーパーゲームクリエイター専攻（4年）スーパーCGクリエイター専攻（4年）ゲームグラフィック＆キャラクター専攻 CG＆映像クリエイター専攻ゲームプログラマー専攻 e-sports科 e-sportsプロゲーマー専攻 e-sportsイベントスタッフ専攻 e-sportsマネジメント専攻（4年）クリエイター科グラフィックデザイン＆イラスト専攻ネット動画クリエイター専攻 ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 PHP CEH（認定ホワイトハッカー） Python CDN（認定ネットワークディフェンダー） Ruby ITパスポート HTML 公認情報セキュリティマネージャー CSS CCNA（シスコ認定ネットワーク技術者アソシエイト） JavaScript 情報セキュリティスペシャリスト SQL 基本情報技術者試験 C++ 応用情報技術者試験 C# CG検定 Java マルチメディア検定その他 DTPエキスパートその他 ※シラバスなどを参照入試方法書類選考面接選考入学難易度面接選考があるため、入学難易度は低くないといえます。筆記選考がないため、勉強による対策は必要ありません。住所大阪市西区北堀江2-4-6 専門学校WebサイトURL：https://www.oca.ac.jp/ NRJ日本理工情報専門学校画像引用元：http://www.nrj.ac.jp/#modalSB 概要/特色国家資格からベンダー資格まで多くの資格が取得できる 2年間でみっちり業界での即戦力が身につく IT+工学のスキルが身につくため、就職時のアピールにつながる NRJ日本理工情報専門学校は多くの資格を取得できるだけでなく、ITに加えて工学まで学べる点が特徴です。区分私立（学校法人瓶井学園）学費入学選考料 2.0万円入学金 27.0万円授業料 100.0万円実習費 14.7万円厚生費 0.6万円校友会費 0.5万円同窓会費 0.5万円 1年次合計 137.9万円卒業後の進路【内定職種】ソフトウェアエンジニアハードエンジニアその他【内定就職先】アイコムアンリツテクニクス日本モトローラその他多数コース一覧【学科・コース】学科コース電子・情報工学科（2年）デジタル放送・通信Aコースコンピュータ開発コース情報システム科（2年）ネットワークシステムコース情報工学科（夜1年）ネットワークスペシャリストコース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML ITパスポート試験 CSS 基本情報技術者試験 JavaScript 応用情報技術者試験 SQL ネットワークスペシャリスト試験その他オラクルマスター認定資格試験 CCNA（シスコ認定ネットワーク技術者アソシエイト）その他 ※シラバスなどを参照入試方法書類選考面接選考（行事参加により免除される場合があります）筆記選考（英語または数学Ⅰ）入学難易度面接選考と筆記選考があるため、他の専門学校と比較すると高めです。住所大阪市東淀川区大隅1-1-25 専門学校WebサイトURL：http://www.nrj.ac.jp/ 大原情報デザインアート専門学校画像引用元：https://www.o-hara.ac.jp/osaka/gakkou/joho/it/ 概要/特色国家資格はもちろん、プログラミング系の資格取得に力を入れている学費も他の専門学校と比較して低価格未経験からプロになるまでの体制が確立されている大原情報デザインアート専門学校は学費が低価格なことに加えて、どのコースにおいてもプロとして働けるスキルを培うことのできる専門学校です。区分私立（学校法人大原学園）学費入学選考料 2.0万円入学金 20.0万円授業料 70.0万円教材費 8.0万円維持費 18.0万円研修費別途卒業諸費用別途 1年次合計 118.0万円卒業後の進路【内定職種】ネットワークエンジニアデータベース管理者システムコンサルタントアプリケーションエンジニア Webエンジニアシステムエンジニアプログラマーその他【内定就職先】アルプス技研 NTTデータ関西 ALL CONNECT 共同コンピュータさくらケーシーエスその他多数コース一覧【学科・コース】コースネットワークスペシャリストコース ITプロフェッショナルコース ITスペシャリストコース ITスペシャリスト+ネットワークセキュリティ専攻コース ITスペシャリスト+Webシステム専攻コース ITスペシャリスト+スマートフォンアプリコース ITエンジニアコース ITビジネスコース ITライセンスコース IT・公務員コース ※他にも学科はありますが、IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 HTML ネットワークスペシャリスト試験 CSS 基本情報技術者試験 JavaScript 応用情報技術者試験 Java ITパスポート試験 C言語 Javaプログラミング能力認定試験その他 C言語プログラミング能力認定試験その他 ※シラバスなどを参照入試方法書類選考面接選考（必要に応じて）入学難易度書類選考のみのため、入学難易度は低めだといえるでしょう。住所大阪市浪速区難波中1-6-2 専門学校WebサイトURL：https://www.o-hara.ac.jp/osaka/gakkou/joho/ 大阪ＩＴ会計専門学校天王寺校画像引用元：https://www.all-japan.ac.jp/movie 概要/特色国家資格はもちろん、ベンダー資格まで多数の資格取得をサポート C言語など、多数のプログラミング言語を習得可能基本的に書類選考のみで入学の手間があまりかからない大阪ＩＴ会計専門学校天王寺校は多くの資格取得をサポートしている学校です。 HTMLやJavaなど自分の意向に合わせた言語を学び、スキルを高めていくことができるでしょう。区分私立（学校法人立志舎グループ）学費入学選考料 2.0万円入学金 20.0万円授業料 74.0万円実習費 16.0万円維持費 16.0万円教材費実習費に含まれる 1年次合計 128.0万円卒業後の進路以下の情報は、大阪校での記載がなかったためグループの内定職種・就職先を記載しています。【内定職種】システムエンジニアプログラマーネットワークエンジニアデータベースエンジニア情報セキュリティエンジニアその他【内定就職先】富士ソフトテクノプロアルプス技研 TISシステムサービス日本システムソフトウェアその他多数コース一覧【学科・コース】コース情報システム3年・2年コース情報セキュリティ3年・2年コース ITビジネスコース情報経理コース ※IT系の学科のみを記載しています。【習得できるプログラミング言語・資格】習得できるプログラミング言語習得できる資格 C言語基本情報技術者試験 Java 応用情報技術者試験アセンブラ言語ネットワークスペシャリスト試験 HTML データベーススペシャリスト試験 CSS MOS JavaScript C言語プログラミング能力認定試験 SQL Java言語プログラミング能力認定試験その他情報処理技術者能力認定試験 Webクリエイター能力認定試験その他 ※シラバスなどを参照入試方法書類選考面接選考（必要に応じて実施）入学難易度基本的には書類選考のみであるため、入学難易度は低めです。住所大阪市天王寺区茶臼山町1-15 専門学校WebサイトURL：https://www.tennoji-itkaikei.ac.jp/ コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由

プログラミング

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。また本記事は、Mary Stribley氏によって投稿されたものです。グラフィックデザイナーにとって、グリッドは特に重要なデザインツールであるとされています。ほんの数本のグリッドの存在がデザインに加わることが、デザインプロジェクト全体にとって、極めて重要なのはなぜでしょうか？デザイナーは一人一人異なる答えを持っているかもしれませんが、要するに、グリッドは、それなしでは時間もかかり、面倒で困難なデザインを構築するのに役立ってくれるのです。もしあなたがグリッドデザインの世界を探求しようか迷っているとしたら、グリッドをレパートリーに加えるだけで、デザインが非常に良くなる15の理由をお話します。 01. コンテンツが整理されるグリッドの主な利用価値の1つは、デザインの要素を整列化、順序化したり、Webページをクリーンできちんとしたデザインにするのに役立つことです。これはグリッドの整列機能の効果であり、グリッドの役割の大部分を占めていると言えます。グリッドシステムを確立することで、要素を整列化するのに使える基本構造を自分自身で創ることが可能となるのです。そして、これによりクリーンで整理されたレイアウトを実現できます。例として、Christine Wisnieski によるTwist CreativeのGridデザインのレイアウトを見てみましょう。各要素がきれいに整列されて、全体としてクリーンな仕上がりになっています。グリッドを使うときには、各要素をきれいに整列できるようなタイプのものを見つけましょう。要素とは具体的には、文章、画像、グラフィックなどで、その他どのような対象も要素となりえます。最終的な完成イメージという大まかな全体像から始めて、それに合うグリッドを組み立てましょう。 02. あなたの仕事を高速化する常に高速化と効率化を追い求める世界で生きる私たちにとって、「効率改善」などは耳に聞き慣れた言葉ですから、このメリットの説明は、すんなりと受け入れてもらえるかもしれません。グリッドは、あなたのデザインにかける時間を、よりスピードアップして充実したものにしてくれるでしょう。というのも、どのポジションに要素を配置するのが最高の選択なのかを示すガイドとしても、機能してくれるからです。要素が良く見えそうなポジションを手さぐりで探してから、ランダムに配置するという作業をしなくても、グリッドがあれば、あなたを自然な解へと導いてくれるでしょう。グラフィックデザイナーのTroy Templeman氏が述べるように、「Gridデザインは、どの場所にコンテンツを配置できるかというよりむしろ、どの場所にコンテンツを配置すべきかという、デザイナー自身の決定をサポートすることで、デザインのプロセスをスピードアップしてくれる。」というわけです。グリッドは家の建築の土台のようなものとして考えることができます。一番最初に建造しておくべきものの1つであり、そこからさらに構築を進めます。 [PR] Webデザインで副業する学習方法を動画で公開中03. 文章の居心地が良くなるようなレイアウトを実現できる少なくとも、グリッドと文字は、2つのデザイン要素として相性のいいの組合せです。強力なグリッドは、文章量の多いレイアウトを、よりすっきりとして組織化された印象に整えてくれます。ボディコピーの文章も読みやすくしてくれるでしょう。文章を読みやすくするのに役立つグリッドの手法の1つに、「ベースライングリッド」があります。これはノートの罫線のようなもので、文章の1行1行がベースラインとなるグリッドの上に乗ります。これらのグリッドは、文章で作られた各要素が、同じ高さに並ぶように整えてくれます。もしあなたが文章の行を整列していなくても、多くの人はその特定のアンバランスな箇所には気づかないかもしれませんが、あなたのデザインが全体として散らかっているということは無意識的に気づくものです。つまり、小さな変化が大きな効果をもたらしてくれるのです。これは、「ベースライングリッド」の実例です。各行がそれぞれ整列されていて、クリーンですっきりとしたタイポグラフィーの効果を生み出しています。 04.　他のデザイナーとの共同作業をもっと容易にしてくれるあなたも今までに他のデザイナーと共同で仕事をしたことがあるでしょうか？そのような場面では、グリッドは、ストレスとコミュニケーションの齟齬をいくらか和らげてくれるかもしれません。すでにお話したように、グリッドはデザインに基本構造を作るのに役立ち、個々の要素がどの場所に置かれるべきかについての方針も示してくれます。もし、あなたが最初にグリッドからデザインを組み立てていれば、新しいデザイナーが途中から加わったときにも、あなたのデザイン手法や、要素の配置の意図を理解してもらえるでしょう。例として、あなたが下にあるようなデザインに取り組んでいて、これから第3パラグラフを作成するときに、他のデザイナーに参加してもらうよう依頼するケースを考えてください。グリッドシステムを使っていれば、配置や整列を正確に実践できます。加えて、「カラムの幅はどのくらいにしますか？」「1つ前のカラムからどのくらいの距離を空けて配置しますか？」などのメッセージが行ったり来たりすることも少なくなるでしょう。というのも、グリッドによって全ての答えはすでに用意されているからです。他のデザイナーと共同で仕事をする時には、わかりやすくて、最終的な完成品に合うグリッドシステムを構築しましょう。必要なカラムの数が3つであるなら、13も使う必要はありません。グリッドシステムを組み立てていないうちから、要素の整列を行うのは避けましょう。グリッドを機能的で役立つものにしておくのが大切です。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

Webデザイン

Webデザインを勉強する時に参考にしたいまとめサイト・記事25選

Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？そこで、今回はWebデザイン（ホームページ）を勉強する時に参考にしたいまとめサイト・記事を集めてみました。今後のWebデザインの勉強方法の参考になるはずです。 Web制作初心者の方への指南から、サイトのコーディング、美しいデザインなど、Webサイトのデザインを考える上でとても参考になるものばかりです。Webデザイナーを目指して、独学で勉強したい方は参考にしてみてください。なお、今回紹介する内容は、TechAcademyのWebデザインスクールでも学べます。目次 Webデザインのスライド資料 Webデザインの見本サイト Webデザインに使える小技・テクニック Webデザインのスライド資料 Web上にはSlideShareで共有されているWebデザインに関する資料が数多くあります。そんなスライド資料を中心にまとめた記事です。 1. Web制作のおすすめスライドデザイン編 Webデザイン全般に役立つSlideShareのスライドを紹介している記事です。かなり数が多いので、休みのタイミングで一気に読んでみるのも良いかもしれません。初めてWeb制作に取り組む人やどういう流れでWeb制作に取り掛かれば良いかよく分からない人は必見のスライド資料ですね。ディレクターやプロデューサーはまず最初に知っておきたい内容でしょう。 W3Q 2. ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７ HTML/CSSからPhotoshopやIllustratorまで、これさえあれば本当にひとりでWeb制作ができてしまうかもというくらい丁寧にまとめられています。 Webデザイン初心者の方はまずはチェックしてみてください。必要な言語やツールの全体像がわかるはずです。コムテブログ 3. もうCSS設計で悩まない！「CSSコーディングガイドライン」策定のための参考記事・スライド 7選 CSSはWebサイトのデザインで必要不可欠なものです。コーディングをしていく際にある程度の決まりごとを作っておかないと、あとになって自分自身やWeb制作チームのメンバーの中で齟齬がうまれてしまいます。この記事を参考に、CSSコーディングのガイドラインを制定してみてはいかがでしょうか。複数人で開発するチームは全員で共有しておきたい内容ですね。 SQUEEZE 4. Webデザインのセオリーを学ぼう Webデザインのそもそもを勉強する資料としては十分な内容です。デザインとアートは全く違うという意見がありますが、デザインはどう考えるべきものなのか理解できるはずです。 SlideShare 5. AppleとGoogleのデザインガイドライン比較今やスマホ対応のデザインが必須となっています。とはいえiPhoneとAndroidというようにデバイス毎にデザインが違うのも事実です。それぞれどういった考えてデザインされているのか資料で見ていきましょう。フォントやボタンのサイズ、配色など細かい部分まで参考になるはずです。今後はより一層モバイルからの閲覧比率が高まるはずです。ぜひチェックしておきましょう。 SlideShare [PR] Webデザインで副業する学習方法を動画で公開中Webデザインの見本サイトどんなデザインのWebサイトが他にあるのかを調べる時に使えるのが見本サイトです。 6. bookma! v3 Webサイトのデザインを決める上で参考にしたいギャラリーサイトです。配色やテイスト、Webサイトのカテゴリーから検索することもできるので1日中見ていても飽きませんね。ファーストビューに大きな画像を表示しているサイトが多いですが、参考になるはずです。 bookma! v3 7. 美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ Webデザインの参考になる見本サイトのまとめ記事です。どのサイトにも一度は目を通して、必要になったときに参考として使ってみましょう。 LIG 8. 新人デザイナーならブクマして損なしのWebデザインギャラリーサイト国内・海外問わずWebデザインギャラリーサイトをまとめた記事です。このまとめを参考にすれば、これでもかというほど数多くのWebデザインを見ていくことができます。 W3Q 9. WebDesignClip クリエイティブ性の高いWebサイトを集めたギャラリーサイトです。自分が気に入ったサイトを「MyClip」として保存することもできるので、Webサイトの作成に役立つはずです。洗練されたサイトも1000以上登録されているので、ぜひ参考にしてみてください。また、自分のサイトを提出することも可能です。 WebDesignClip 10. WebDesignFile 上で紹介したWebDesignClipの姉妹サイトでこちらは海外のサイトのみを掲載しています。より最新のトレンドを知りたいと思ったら海外の事例を参考にすると良いでしょう。英語のフォントを取り入れたサイト作成に役立つはずです。自分のサイトをよりシンプルに、よりスタイリッシュに見せたいと思ったら参考になるサイトが多くあると思います。 WebDesignFile 11. Design Link Database 管理人さんがセレクトした優れたWebデザインを1日1～2つ紹介されるサイトです。個人で管理しているサイトにもかかわらず、twitterのフォロワーは4万人近くもいます。Webデザインに迷ったらここ、というサイトです。 Design Link Database 12. イラストブックマークイラストが使用されたWebサイトを集めたギャラリーサイトです。実際の人ではなくイラストやアイコンを使うことで、コミカルな印象を与えることができます。会社のコーポレートサイトや堅いビジネスを行っている企業はイラストを使うことで記憶に残るでしょう。どのサイトも色が多くポップなサイトが多いのが特徴です。イラストブックマーク 13. I/O 3000 かなり個性的なWebサイトが多いギャラリーサイトです。音楽やグルメ、旅行や教育、スポーツなどのカテゴリやタグ、そして色で絞り込むことができます。イベントのキャンペーンサイトやコーポレートサイトの作成でも迷ってしまうくらい事例が多いので、良いインスピレーションが得られるはずです。 I/O 3000 14. 81-web.com 採用ページ、商品紹介ページ、オフィシャルページが多く並んでいるギャラリーサイトです。単純に見ているだけでもどんなWebデザインが流行っているのか何となく分かるはずです。トレンドを取り入れたいと思っている方はぜひ見ておきたいサイトでしょう。 81-web.com Webデザインに使える小技・テクニック実際にデザインをする際に参考になる小技、テクニックをまとめた記事です。 15. 次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集 Webサイトを制作する際に参考にしたいCSSとJavaScriptのテクニック集を集めた記事です。 iOS7の登場によりますます活気づいている「フラットデザイン」についてのテクニックも紹介されています。アプリのデザインやモバイルのデザインに関わる人には重要な内容です。 Design Develop 16. スマートフォンサイトのhtmlコーディングメモ12個スマートフォン用のサイトのデザインを考えるときに参考にしたいまとめです。 htmlの段階でもできることはたくさんあるので、覚えておきましょう。Webデザイナーに限らず、コーダーやマークアップエンジニア、ディレクターに役立つメモになるでしょう。とても細かい点ですが、ユーザーにとって使いやすいデザインを再現できるので、細部にもこだわりましょう。 LIG 17. ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集大手企業などの既存サイトの配色を解説した記事です。デザイナーに依頼するときにも知っておきたい内容がまとめられています。Webサイトやバナー、ボタン1つを取っても色のバランスはとても重要です。ノンデザイナーこそ知っておきたい内容なので、必読の記事と言えるはずです。 Find Job !スタートアップ 18. ワンパターンなウェブデザインから抜け出すための10のヒント同じ人物が作ったサイトは、同じようなデザインになりがちかも・・そんな悩みを持った人向けの記事です。クリエイティビティを引き上げる10のヒントが紹介されています。 Webサイトに関わらず「新しい発想が欲しいな」と思ったら見ておきたい記事になります。ぜひいろんな引き出しを作っておきましょう。 coliss 19. ウェブデザイナーが見直しておきたい、2016年のウェブデザイントレンド10個まとめ 2016年のデザイントレンドをまとめています。サイト上にはどういったものを載せて、どういう色でなど2016年のトレンドが分かるはずです。アニメーションや色、フォントなど様々なトレンドが分かります。今取り入れておきたい要素などもあるので、デザインに関わる人は要チェックでしょう。 PHOTOSHOP VIP 20. CSSのみで実装するボタンデザインやホバーエフェクト20+α 最近は動きの出るWebサイトが増えてきました。この記事ではホバーエフェクトに焦点を当てて、デモとソースコードを紹介してくれています。そのままコピペして自分用に使えるので、初心者の方でもすぐに動きを再現できるはずです。実際に書きながらどんな変化があるのか確認してみてください。 NxWorld 21. Appleのヒューマンインターフェースガイドラインから学ぶ5つの優れたUIの秘密 AppleのUIデザインに関する記事を翻訳した記事になります。普段からMacやiPhoneを使っている人は多いと思います。Apple製品はデザインが素晴らしいとよく言われていますが、どういったプロセスでデザインが出来上がっているのか必見です。このブログ自体、Goodpatch（グッドパッチ）という日本を代表するUIデザインに特化したデザインカンパニーなので、勉強になる記事が多くあります。最新のデザイン事情やデザイナーを目指している方は、ぜひともブックマークしておきたいサイトの1つでしょう。 memopatch 22. Code My UI 海外のサイトですが、ちょっとしたテクニックを動きを確認しながら学べるサイトです。ボタンを押したときの動きやマウスオーバーした時の動きなど、ユニークな実装が多く見ているだけでも楽しめます。ぜひ自分のサイトにも取り入れてみてください。 Code My UI 23. 意味のあるデザインを！自然なアニメーションの作り方海外のアプリ、モバイルサイトを事例に優れたアニメーションの載せ方を紹介しています。アニメーションは動きがあって、一瞬でかっこいいや美しいと思ってしまいがちですが、使うシーンがとても重要です。ユーザーにとって使いやすいWebデザインを実現するためには必要不可欠な知識だと思うので、ぜひチェックしておきましょう。 TechAcademyマガジンコラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。

Webデザイン

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Dmitry Fadeyev氏によって投稿されました。近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。近年、同様のことがデザインの世界でも起きています。ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。目次モダンデザインの誕生デジタルの装飾本物のデザインミニマリズムではない本物のデザインが重要である理由モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。 [PR] Webデザインで副業する学習方法を動画で公開中デジタルの装飾モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。 Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。本物のデザインモダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。しかし、正確には何がデザインを「本物」にするのでしょうか？本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」デジタルデザインにおいては、デザインは大きく次のように集約できます。デジタルな外観を保持すること金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。スキューモーフィズムを排すること電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。コンテンツを中心にしたスタイルにすることスタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

Webデザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。デザイナーとエンジニアの意見を一致させるのは、非常に大変です。もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。目次グリッドシステムをレスポンシブデザインで設計するピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える値を統一するプロトタイプを使った共同作業をするデスクトップファーストの手法を排除しないことアセットの引き継ぎには十分注意を払う 1. グリッドシステムをレスポンシブデザインで設計するグリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。グリッドの幅を具体的に設定するまず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。デザイナーは、モバイル端末上の表示もチェックすることモバイルビューデザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。互換性の問題デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。 [PR] Webデザインで副業する学習方法を動画で公開中2.ピクセルパーフェクトなデザインを実現できるツールを使うショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。フォントの整合性第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。パフォーマンスの問題ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。 Photoshopの代替ツールを考えるあなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSのリスト（list-style-image）で画像を使う方法【初心者向け】

リストに画像を使う方法

実際に書いてみよう

HTML

CSS

関連するキーワード

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

大阪のIT・情報系専門学校18選｜自分に合った学校の選び方も解説

【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由

Webデザインを勉強する時に参考にしたいまとめサイト・記事25選

1900年代のデザインの歴史から学ぶ！デザインの基本とは

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

リストに画像を使う方法

実際に書いてみよう

HTML

CSS

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ