デザイナーの道具箱
- カテゴリー
- デザイン
このシリーズでは、Webデザインに関する実装技術や、ツール、考え方などを紹介します。Webデザイナーだけでなく、マークアップ・エンジニアやプログラマーにも使える「道具」を提供します。
最終回 デザイン指定のポイント 4
デザイン指定のポイントの最終回は、ボタン、ボーダー、表組み、アイコンフォント、JSで実装するUIの指定を取り上げます。アートディレクターの小原が重要だと考える理由と、指定方法を詳解します。
第9回 デザイン指定のポイント 3
デザイン指定で、考えるべきポイントは3つあります。デザインをエンジニアへ渡すときに何を準備して渡すか、デザインの共通部分、個別部分の指定をどう行うかです。これらを詳しく解説します。
第8回 デザイン指定のポイント 2
デザイン指定はフロントエンド・エンジニアに、実装に必要な情報を過不足なく伝える手段です。ユーザーに情報を伝えるデザインとは、観点を変える必要があります。そのポイントを解説します。
第7回 デザイン指定のポイント 1
エンジニアが実装時に使うデザイン指定は、エンジニアとの大切なコミュニケーションのひとつです。この記事では、画面デザインをエンジニアに渡す場合の、デザイン指定の実践例を紹介します。
第6回 圧縮形式の得意、不得意
この記事ではGIF、JPEG、PNG、それぞれの圧縮方式の詳細を解説しながら、どのような画像の圧縮が得意なのか、また不得意なのかを考えます。画像の軽量化のポイントとなる知識です。
第5回 表示速度をケアする画像
コンテンツの表示速度は重要な「機能美」のひとつだと言えます。この記事では、画像の圧縮方法を理解することで、表示速度の向上に寄与する画像の特徴を解説します。
第4回 実用Webフォント 実例編
この記事では、Webフォントのメリットやデメリットを実際のWebアプリケーションの実装例を通して紹介します。
第3回 実用Webフォント 知識編
Webフォントを使用するにあたってのフォントの選択肢、また、必要となるライセンスの問題、表示速度の問題とその対策を解説します。
第2回 Font Awesomeを使う
この記事ではアイコンをフォントとして収録したFont Awesomeの使い方を解説します。class名に所定の名前を追加すると、大きさの変更などが可能で、使い勝手のよさが特徴です。
第1回 Font Awesomeの概要
この記事では、さまざなアイコンをフォントファイル形式にまとめたFont Awesomeを紹介します。多端末対応、Webパフォーマンス向上に、アドバンテージを持つ技術です。