ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
実践! WEBビジュアルデザイン 第13回「クライアントと一緒にデザインをつくる（前編）」 - MdN Design Interactive
2011年3月18日 TEXT：文＝石田裕豊（（株）フォーデジット） Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。 そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。 本連載では、デザインを策定するうえでの考え方や取り組み方に関して言及してきたが、今回は実際のプロジェクトの現場で、クライアントとデザインをつくっていく具体的なプロセスに関して言及する。 過去の内容をチェックしていただくとわかると思うが、プロジェクト開始後、すぐに手を動かしてデザインを作成するのは得策ではない。効
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──サイトチェックに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術を紹介する。Webサイトが完成しても即納品というわけにはいかない。不具合がないかを検証することもWeb制作の一部といっても過言ではない。ここではチェックツール活用例を紹介する。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツ
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──プロジェクト管理に使えるツール（1） Web制作では制作物のクオリティも重要だが、プロジェクトの進行管理を効率化し、コストを抑えることも大きな課題だ。そうしたツールの活用術を紹介しよう。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツール（2）はこちら 第6回 オフィス作業に使えるツール（1）はこちら 第7回 オフィス作業に使えるツール（2）はこちら Tweet [INDEX] >>> [technique 01]クライアントも巻き込んでプロジェクト管理をする >>> [technique 02]メモや注釈などのウィジ
MdN Design｜総合情報サイト
Fireworksには、初期状態で数多くのパターン画像が用意されている。パターン画像には写実的なものからサイケデリックなグラフィックまで、幅広く用意されている。しかし、ひとつのパターン画像のバリエーションがあまり用意されておらず、使いどころがあまりない印象を受ける。しかし、一工夫するだけで汎用性は高まる【1】。特に、Webデザインをするうえでのパターン画像は必須テクニックなので、ぜひ使いこなして、Webサイトの印象を短時間で変えていきたい【2】【3】。
JavaScriptを難読化しファイル容量を抑える - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 13] JavaScriptを難読化しファイル容量を抑える 文＝榊原美穂（think-L） Tool packer URL http://dean.edwards.name/packer/ 最近ではJavaScriptが使われているWebサイトも増え、JSファイルがいくつも読み込まれる場合も多い。ブラウザへの負担を少しでも減らすためにJavaScriptコードを難読化してファイル容量を抑えたい、そんなときに便利なのが「packer」だ。難読化の処理をしたいJavaScriptコードをペーストして「Pack」ボタンを押すだけでJavaScriptコードが難読化される。数百行レベルのJavaScriptコード、たとえばjQueryのファイルは、難読化する
ケータイのアクセスを振り分けしたい - MdN Design Interactive
携帯電話向けのWebサイトの開発では、キャリアに応じてページを振り分けたりする処理が一般的だ。PHPで「ユーザーエージェント」を検査すれば、振り分けることができるが、そのようなプログラムを記述するのは手間がかかる。 そこで、便利なPHPライブラリがあるので紹介しよう。「Net_UserAgent_Mobile」（pear.php.net/package/Net_UserAgent_Mobile/）は、「PEAR」というPHPのライブラリ群のひとつだ。 「PEAR」は通常、コマンドラインなどからインストールするのが一般的だが、FTPアクセスしかできない場合でも利用することはできる。ここでは、その方法で利用してみよう。 まずは、先のWebサイトの「Download」からファイルをダウンロードする【1】。また、PEARのライブラリ自身も必要なのでダウンロードしよう（pear.php.net/pa
MdN Design｜総合情報サイト
クライアント企業にとって「ケータイ活用」は、単にWebサイトを制作するだけの話ではなくなってきた。たとえば、QRコードからケータイサイトへと誘導する例では、ユーザーが思わずアクセスしてしまうものと、そうでないものがある。その差はチラシなどの集客ツールによるところが大きい。今やWebサイトを用意して待っているだけが「ケータイWeb制作」ではない。リアル空間や紙ツールなどと連携し、各々が得意な役割を受け持ち、トータルでの成果を狙うことも必要な場合がある。たとえば、ケータイメルマガで顧客の囲い込みをしてPC通販や店舗での売り上げに誘導する、といった活用がそうだ。 さまざまなメディアを複合利用している大企業では、最近「Attribution Model」（要因モデル）という言葉が話題に上るという。ケータイに限らず、各メディアやツールがコンバージョンにどう寄与するのかを探ろうという試みだ。旧来のマー
相手を積極的にさせるプレゼンテーションテクニック - 思考するWebディレクション - MdN Design Interactive
Webサイトのクオリティは「企画」で決まる。Web制作は「企画」、「設計」、「制作」という基本フローで進行するものだが、その大本となる企画が良くなければ、デザインやシステムにどれだけこだわっても、結果的にWebサイトのクオリティが上がることはない。しかし、企画さえ良ければいいのかというと、それだけでは不十分といえる。どれほど優れた企画であっても、クライアントの承諾が得られなければ意味がない。つまり、自分が用意した企画が、クライアントにどれだけ理解を示してもらえるかということが肝心だ。さらに、そこに魅力を感じて予算や時間を投資したくなるかどうかが案件の成否を左右する。 では、クライアントがOKを出したくなる企画というのは、どのようなものだろうか。筆者がWebディレクターとしての立場から述べるならば、クライアントに提案した際に「それいいね。やってみたい!」、「この企画なら自分たちの目的を達成で
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 07] CSS Spriteを手軽に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool CSS Sprite Generator URL http://ja.spritegen.website-performance.org/ CSS Spriteは、読み込みのリクエスト数を減らすことができるので、ページ最適化に有効な手段だが、実装するのに手間がかかる。そんなときは「CSS Sprite Generator」を使うといい。「CSS Sprite Generator」は、複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレータである。これを使えば、複数の画像をひとまとめにして連結画像とCSSを作成し
MdN Design｜総合情報サイト
スタイルの付与・常套テクニックを使う CSSを分けて記述する 次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套（じょうとう）的に使われているテクニックで効率的に制作できる。 CSSを設定するには＜link＞要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、＜link＞のtype属性はhrefで指定されるコンテンツ（この場合はCSSファイル）のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。 この＜link＞属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSSで
Webデザイナーは人の流れをデザインすることも必要不可欠 - MdN Design Interactive
2010年5月24日 TEXT：石井研二 （株式会社HARMONY 取締役 兼 COO） 入口ページをしっかり管理しなければならない Webサイトは、集客と誘導で成果を出すもの。それがうまくいっているかを確認するために行うのがアクセス解析であり、うまくいっていない部分を見つけても、比較的容易に修正できるのがWebというメディアの良いところだ。 たとえばサイト全体の直帰率が60％あるとする。10万人訪れていたとしても、実質的に4万人しかWebサイトを見ていないのだから、これでは成果に結びつくことは少ないと考えなければならない。 集客をするのは、「入口ページ」だ。ほかのWebサイトからリンクされていたり、検索結果に表示されたり、お気に入り登録から再訪を受けるなど、さまざまな入り方がある。メールに記載されたURLをクリックして訪れる人も、無視できない数になるものだ。 入口ページとゴールをつなぐも
MdN Design｜総合情報サイト
第9回「2010年上半期Webデザインのトレンドまとめ」 2010年05月25日 Webデザインは、驚くべき速度で進化してきた。特に最近はCSS3やHTML5、フォント埋め込み技術の台頭など久々の黄金期と言ってもよいだろう。このような中、私たちは多くの魅力的なWebサイトを見てきた。そこで2010年も半ばを迎えつつある現在、改めてWebデザインのトレンドを考えてみることにする。果たしてどのような新技術やコンセプト、アイデアが重視されているのだろうか？さらには数カ月後、数年後にWebデザインがどのように進化していくかも検討していきたい。また、Webデザイナーとして現在そして将来に向けて準備しておきたい事柄についても触れていく。 【注意】本記事はシリーズ記事の第1弾の内容となる。第2弾を見逃さないよう、RSSフィードの登録やTwitterフォローなどをするとよいだろう。 【MdN Design
MdN Design｜総合情報サイト
ウインドウ幅やサイト全体の横幅に合わせて、複数のカラムやボックスをきれいに並べたい場合の方法はいくつか考えられるだろう。そのひとつとして「SOHTANAKA」の「Smart Columns w/CSS&jQuery」（www.sohtanaka.com/web-design/smart-columns-w-css-jquery/）【1】を紹介しよう。 【1】「Smart Columns w/CSS&jQuery」。ほかにも参考になるtipsが紹介されている この方法ではfloatで横並びさせたそれぞれのカラムの横幅をJavaScriptで変更することにより、カラム同士を等間隔に並べられるようにするものだ【2】。 【2】各カラムが等間隔に並んでいる HTML【3】、CSS【4】、JavaScript【5】を用意しよう。ここではjQueryは「jquery-latest.js」（code.jq
MdN Design｜総合情報サイト
［INDEX］ >>> 第 1回 なぜITの知識がクリエイティブに必要なのか >>> 第 2回 次世代Web体験の鍵になる「WebKit」 >>> 第 3回 Webサイトの観覧・制作におけるキースペック「GPU」 >>> 第 4回 Webに最適化された拡張性の高いベクター画像「SVG」 >>> 第 5回 シンブルログインを可能にする認証サービス「OpenID」 >>> 第 6回 ネットとの親和性が高い小型ノートPC「ネットブック」 >>> 第 7回 利用者にも開発者にもオープンなモバイル環境「Android」 >>> 第 8回 リアルとデジタルの境界をあやふやにする拡張現実の世界 >>> 第 9回 Web上の活動がリアルにつながるライフストリーム >>> 第10回 プラグインなしで3Dを実現する新技術「WebGL」 >>> 第11回 WiFi Directがつくる新し
MdN Design｜総合情報サイト
.htaccessとは? 「.htaccess」は「ドットエイチティーアクセス」と読み、Webサーバ上のファイルやディレクトリに対し、ディレクトリ単位でアクセス制限や転送などを設定できるものだ。頭に「.」（ドット）がつくが、「.txt」や「.jpg」のような拡張子ではない。 Webサーバで使われているOSのUnixでは、Windowsのようにそもそも拡張子という概念がないため、あくまでほかのファイルと区別するためのものだと理解しておこう。Webサーバは非常に多くの機能が備わっているが、これに対して.htaccessを使ってディレクトリごとにWebページの用途に合わせた適切な設定をする。通常、Webページの設定はApachで定められているが、.htaccessを使うとApachと違う設定にもできる。 基本的な使い方 .htaccessを使うとさまざまなことができるが、まずは基本的な扱い方を覚
MdN Design｜総合情報サイト
専門知識を必要としないケータイサイト制作が始まっている ケータイサイト制作には、PC向けWebサイトの制作にはないさまざまな配慮が必要になる【1】。もとをたどれば、小さな端末に機能を盛り込むための規格への対応やユーザーの利便性向上のためのケアなのだが、PC向けのWeb制作やサイト運用の現場感覚からすれば、めんどう以外のなにものでもない。それが嫌でケータイサイト制作を敬遠するWebクリエイターを著者は知っている。かけるコストと工数を抑えながら、これら「ケータイ専用の配慮」をどうやってクリアするかは開発・運用のひとつの焦点だ。 ひとつの回答がFlashによるWeb制作だ。事実、FlashはWebクリエイターとケータイサイト制作を結ぶ大きな懸け橋になっている。トップページのFlash制作からケータイサイト制作に参入したというWebクリエイターは多いのではないだろうか。ページデザインの自由度の高さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
デザインってオモシロイ -MdN Design Interactive- TOP
制作アイデアと応用技を身につけよう！WEBパーツ装飾デザイン辞典92 - MdN Design Interactive
