CSS についても、PC サイトとは異なる箇所がある。スマートフォンは縦向きと横向きで横幅が変わり、デバイスの種類によっても違うため、コンテンツの幅は100% のリキッドレイアウトで作るのが一般的だ。HTML5 の新しい要素に対してもCSSのリセットを行うために、今回はhtml5doctor のCSS（http://www.html5.jp/html5doctor/html-5-resetstylesheet.html）を利用した。また、モバイル版WebKit独自のプロパティもいくつか用意されている【2-1】。 【2-1】-webkit-text-size-adjustをnoneとすれば、デバイスの向きを変えたときも文字サイズを拡大しないように指定できる。-webkit-tap-highlight-colorでは、リンク要素をタップしたときの色を指定できる。指で操作していると自分がどこをタ

第2回「Coming Soonページをデザインする」 2009年11月26日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：Designing “Coming Soon” Pages http://www.smashingmagazine.com/2009/11/10/designing-coming-soon-pages/ 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています ドメインを購入したが、まだWebサイトをローンチしていない時、何をすべきか決めるのは、いつでもちょっとした難問だ。ドメイン管理団体やWebホスティング会社のデフォルトページをそのまま表示させておくのは、プロらしいとは言えない。とはいえ、Webサイト制作に本格的に取り組むべき段階では、汎用的な

WEBのネタに困らないクリエイターになろう！ デザインアイデアが続々わき出る3ステップ＆トレーニング クリエイティブなものをつくりたいけれど、新しいデザインや斬新なアイデアはそうそう生まれるものではない。本特集は、デザインの基となるネタを集め整理し、それを並び替えたりするなど、目に見えるカタチへアレンジすることで、新しいデザインを生む方法を3ステップ形式で紹介する。

作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──デザインに使えるツール（1） [technique 03] カラーパターンを作成しアプリケーションで活用する 文＝高橋義博 Tool Color Match URL http://www.hypergurl.com/colormatch.php Color Matchは、オンライン上でカラーパターンを簡単に作成できるツールだ。Color Matchで、RGBの各値を設定して任意の値を指定すると、選択したカラーに合う配色を8パターンも表示されるため、とても便利である。表示された配色をPhotoshopやIllustratorで利用できるように、ACTファイルとAIファイルで保存することができるため、とても便利である。また、表示した配色状態をブラウザで確認するためのURLも利用できるため、配色を複数で共有する

基となる写真素材を用意 1-1 まず最初に、Photoshopで象のおもちゃの写真を開いたら1-1、レイヤーメニュー→“新規”→“背景からレイヤーへ...”を実行し、背景レイヤーを通常レイヤーに変換しておく。さらに、ペンツールを選択し、ツールオプションバーの［パス］をオンとしたら、象を囲むようにパスを作成した。 2階調化でイラスト風に加工する 2-1 2-2 Lesson1で作成したパスのサムネールを、commandキーを押しながらクリックして選択範囲を作成。次に、選択範囲メニュー→“選択範囲を反転”で、選択範囲を反転したら、象のレイヤーを選択し、deleteキーを押して背景部分を削除した2-1。続けて、イメージメニュー→“色調補正”→“2階調化...”で、表示されたダイアログのカーソルを左側にずらし、プレビューを見ながら象の絵柄がわかりやすい程度に調整して実行しておく2-2。 ダブルトー

旬のアートディレクターをお迎えして、デザインする際の思考のプロセスと創作のスタンスに迫るコーナー。第36回目はStudioKannaのカンナアキコさん。第1話では、音楽専門チャンネルMTVが開催するイベント「MTV VIDEO MUSIC AWARDS JAPAN 08」（以下VMAJ08）の制作物にスポットをあてる。

基になる画像の縁を、周辺光量不足のように暗く加工。さらに、調整レイヤーでコントラストや彩度を高めることで作成した。また、あえて色かぶりするまで彩度を高め、コントラストを強調することで、よりトイカメラ風の質感を演出することが可能だ。 基になる写真の縁を暗くする 1-1 1-2 まず最初に、基になる写真をPhotoshopで開く1-1。続いて、“変形”→“レンズ補正...”フィルタを選択。さらに表示されたダイアログで、［周辺光量補正］を［適用量：－100］として実行した1-2。 彩度を高めてトイカメラ風の色合いを演出 2-1 ▼ 次に、レイヤーメニュー→“新規調整レイヤー”→“色相・彩度...”を選択し、表示されたダイアログで［彩度：77］として［OK］ボタンをクリックした2-1。この際、あえて画像がトーンジャンプするぐらいまで、彩度を高めるのがポイントだ。 コントラストを強めて質感を高める

スプレーを吹いて描いたような文字 制作・文　ドルバッキーヨウコ（D-design） URL　http://www.dholbachie.com/design/ 使用ソフト　Photoshop CS2 1-1 1-2 まずPhotoshopで1,695×1,116ピクセルの新規ファイルを作成。ブラシツールを選択し、［ソフトエアブラシ-円300］で、ムラをつくりながら塗りつぶす 1-1。次に“ノイズ”→“ノイズを加える...”フィルタを［量：150］、［分布方法：均等に分布］、さらに［グレースケールノイズ］にチェックを入れて適用 1-2。 2-1 2-2 さらに“その他”→“明るさの最大値...”フィルタを［半径：1pixel］で実行 2-1。次に新規レイヤーを作成し、ムラをつくりながら薄くブラシで色を塗る 2-2。このとき、背面の粗い粒状を消さないようにブラシの［不透明度］を下げるなどしよう

“仕事の壁”は誰にでもやってきます。そんなとき、ほかのみんなは、どうしているのでしょうか？　このコーナーでは、今まさに壁を乗り越えようとしている人、乗り越えて一歩先に進んだ人など、クリエイティブ業界でがんばる仲間たちが登場。これまでの失敗談・成功談や現在の課題、そして将来像を語ります。今の仕事に前向きに取り組み、階段を一段登るためのヒントが得られるはずです！ 株式会社ソニックジャムの木村靖裕さんはグラフィックデザイナーの出身だ。まだDTPがさほど普及してなかった時期で、今となってはめずらしい版下制作の経験を持つ。その後“動くコンテンツ”に魅せられWeb制作を希望、28歳のときに1回目の転職を果たす。FlashもLightWave 3Dも、すべて独学でマスターしてきた彼の現在の職場は、2回目の転職で出会ったもの。自分の納得するクリエイティブをつねに追求した結果、転職という選択肢を選びとって来

デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！