ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

デザイナーの道具箱

全10回

このシリーズでは、Webデザインに関する実装技術や、ツール、考え方などを紹介します。Webデザイナーだけでなく、マークアップ・エンジニアやプログラマーにも使える「道具」を提供します。

第1回を読む

最終回 デザイン指定のポイント 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パフォーマンス向上に、アドバンテージを持つ技術です。