デザインのアイデア探しに最適! 国内Webギャラリーサイトまとめ - MdN Design Interactive
Webデザインのアイデア探しのときに役立つ、デザイン性の高いWebサイトを集めたWebギャラリーサイト。国内外に数多く存在するが、国内向けサイトデザインのアイデアを探す際は、やはり国内のWebサイトを中心に集めたWebギャラリーサイトがよいだろう。ここでは定番のものから最近注目を集めるWebギャラリーサイトまで紹介していく。 MUUUUU.ORG 縦長のサイトを厳選して集めたWebギャラリーサイト。クールなデザインから、ポップなデザインまでさまざまなWebサイトが揃っている。カテゴリは、Webサイトの業界別にわかれたINDUSTRY、デザイン用途別にわかれたDESIGN、Webサイトの形態別にわかれたTYPE、色彩別にわかれたCOLORの4つが目的別に用意されており、使いやすい。 URL：http://muuuuu.org/ I/O 3000 Webデザイナー/フロントエンドエンジニアとし
WordPressでビジネスサイトを作る際はサイト全体の構造を考えよう! - MdN Design Interactive
WordPressで一般的なよくあるブログを作成する際、記事のフォーマットはひとつで、そのフォーマットで記事を投稿していく場合が多いと思います。しかし、ビジネスサイトの作成では掲載にする内容によって見せ方が変わりますので、複数のレイアウトのフォーマットが必要になってきます。そこで、通常の静的なHTMLでサイトを作るように、サイト全体の構造をしっかりと把握できるサイトマップや、それぞれのページのURLを管理できるようにして、WordPressのサイト構築をしていくとわかりやすくなります。 解説：（有）ムーニーワークス ハヤシユタカ 今回作成したサンプルサイトでは、サイトの更新情報として「ニュース」という分類の中に「お知らせ」と「セミナー情報」というサブカテゴリーを作り、製品紹介をする「製品情報」として「製品A～D」というカテゴリーを設けました。 これにより、カテゴリー自体の増える可能性を持ち
記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ - MdN Design Interactive
今回は記事の投稿時にHTMLなどを記述する必要がある際でも、だれでも簡単にできるように投稿作業を便利にするカスタマイズ方法をいくつか紹介していきたいと思います。投稿画面内にもスタイルを適用される「editor-style.css」の設定方法や投稿時の自由に入力したい情報をボタンとして投稿できる「AddQuicktag」やビジュアルエディタのボタンを拡張する「TinyMCE Advanced」の使い方を見ていきます。 解説：（有）ムーニーワークス ハヤシユタカ WordPressではスタイルシートは基本は「style.css」に記述して作業していきます。記事を投稿する画面上では、何もしないとそのまま原稿や画像がそのまま表示されてしまいます。 Webデザイナーの人達はそれで全く問題ないですが、運用を担当されるWeb系以外の方ですと単純な文章だけの日記的なページ以外に、少し複雑なコードになると投
今さら聞けない！ レンタルサーバの選定と便利な使い方 第1回 - MdN Design Interactive
第1回 レンタルサーバの基礎知識 レンタルサーバを選定する際に、何を基準に選定を行うだろうか？ 一言でレンタルサーバと言っても「共用サーバ」、「専用サーバ」、「VPSサービス」、「クラウドサービス」などのさまざまな種類が存在する。自分の案件がどのサーバにマッチしているかを見極めるには、各サーバの性質や特長を理解しておくことが重要だ。それぞれのサーバの特徴を抑え、案件にマッチしたサーバを選定することができれば、余計な作業やトラブルが発生することも少なくなり、これまで以上にWeb制作に専念できる環境を自分で整えることができるはずだ。 ここでは、知っていそうで知らない各種サーバの特徴やメリットを解説しよう。 解説・文：阿部正幸（KDDIウェブコミュニケーションズ） ■サーバの種類と特徴を捉える ここでは各サーバの特徴を紹介する。サーバのことがよくわからないという人は各サーバの違いを整理しながら、
即戦力となるアナログ表現の技を押さえる - MdN Design Interactive
腕のいいデザイン事務所で修業しないと ふつうは身につかない知識と技と心得 10 即戦力となるアナログ表現の技を押さえる 解説： 高橋としゆき［Graphic Arts Unit］ url： www.graphicartsunit.com/ 使用ソフト: Photoshop CS3 かすれや汚れなどといった、アナログの演出がデザインで必要になる機会は多いはずだ。そうしたアナログ感の演出にはさまざまな方法があるが、基本的な手法はしっかり身につけておきたい。ここでは、デジタルだけでアナログ感を表現する方法を紹介しよう。 実際にプリントアウトして作業する時間や環境がない場合や、画材などを使ったアナログの作業を経ずに、もっと手軽にアナログ感を表現したいということもあるだろう。アナログ風の質感はPhotoshopのフィルタなどを駆使して表現することもできるので、そうした技を使った多彩なアナログ表現を覚
MdN Design｜総合情報サイト
Web制作の現場では、さまざまなセオリー・考え方が要求される。筋道の通ったセオリーや理論を理解して実践することは、Webのクオリティを高めるうえでは正攻法といえるだろう。ここではセオリーや考え方などにポイントを絞り、根拠と実践への活用法を紹介していく。知らなかった内容はもちろん、あいまいに理解していた内容もきちんと理解して、Webの完成度を高めてほしい。 ［INDEX］
MdN Design｜総合情報サイト
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
グーグル、HTML5で作った「ブラウザやウェブについて知っておきたい20のこと」日本語版を公開 - MdN Design Interactive
グーグル株式会社は、Web上で読めるガイドブック「ブラウザやウェブについて知っておきたい20のこと」日本語版の提供を開始した。 同コンテンツはインターネットやWebの基礎を楽しく学べるガイドブックで、同社のChromeチームによって制作された。HTML5を活用して絵本のカバーの質感や、実際にページをめくっているかのような感覚を表現しており、オフラインでも動作可能だ。なお、閲覧にはHTML5に対応したWebブラウザが必要となる。 同コンテンツには、本物の絵本を開くときの重さのバランスや、パラパラとめくる感覚、ブックマーク、夜中に懐中電灯で絵本を読んでいるような気分を味わえる「ライトオフモード」などの技術が使われており、同社はこれらの技術を開発者向けサイト「Google code」でオープンソースとして公開している。 「ブラウザやウェブについて知っておきたい20のこと」 「ブラウザやウェブにつ
MdN Design｜総合情報サイト
PHPスクリプトによって動的に生成した画像をブラウザに表示させる場合、imgタグのsrc属性に画像生成用のPHPファイルを指定するが、もしこの時処理に問題があっても、エラーメッセージが確認できない。画像生成スクリプトにブラウザで直接アクセスし、エラーが出ていないか確認しよう。 imgタグのsrc属性にPHPファイルを指定した場合、エラーメッセージが出力されていてもブラウザには表示されないため、原因の特定に苦労する ブラウザのアドレスバーにPHPファイルへのURLを入力して直接アクセスし、エラーメッセージが表示されていないか確認しよう。ただし、エラーメッセージを表示させるにはdisplay_errorsが「on」に設定されている必要があるので注意する [INDEX] >>> [TROUBLE 50] MP3の外部サウンドをなぜかループできない >>> [TROUBLE 51] jQueryを
プロでも見落としがちなデザインの死角 - MdN Design Interactive
デザインの本質論から、上手な逃げの技まで プロでも見落としがちなデザインの死角 日々のデザインワークの中で、何となくやっていることや、改めて考えると意外に知らなかったことなどはいろいろあるだろう。今回の特集では、そういった多くの人が見落としがちなものを思いつくかぎり集め、まとめて紹介していく。本質的な話からちょっとした逃げの技まで、デザインの知識が総合的に身につく内容だ。 知っておくべきこと ベーシックなパターンを応用してパターンをつくり込む パターンの質感を加工すれば、ベーシックなドットやストライプはどんなデザインにも活用できる。ここでは、加工したパターンを応用して、イメージに合わせてさらにつくり込むテクニックを紹介する。 制作／文：高野 徹［lolo66］ ●URL：http://www.lolo66.com/ ●使用ソフト：Illustrator CS3、Photoshop CS3
実践! WEBビジュアルデザイン 第5回「デザインはなぜひっくり返るのか（前編）」 - MdN Design Interactive
2011年1月21日 TEXT：文＝田口 亮（（株）フォーデジット） Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。 そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。 ■できる限り避けたい事態を考える 今回はデザイナーや制作会社にとって「できる限り避けたい事態」について考察したい。適切なプロセスで行ったプロジェクトではそのようなことはあまり起こらないが、どういうプロセスで行ったアウトプットであれ、クライアントにデザインを提出する瞬間がやってくる。今回のテーマである「できる限り
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──ファイルの共有に使えるツール クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラ インサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービス の中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより 快適に作業するための82の活用術を紹介する。今回はファイルの共通に使えるツール を取り上げる。制作者やクライアント、そのほか制作にかかわるもの同士の間では、 さまざまなデータのやりとりが生じる。便利なオンラインストレージの使い方を知っ ておくと安心だ。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（
01-（2）トーンカーブ - MdN Design Interactive
Technique01 画像補正の基本 02 トーンカーブ 「トーンカーブ」とは、画像の補正前と補正後の結果を表した線の傾きや曲がりを調節し、画像の明るさや色調を補正する機能だ。その汎用性の高さから、カメラマンやフォトレタッチャーと呼ばれる写真のプロフェッショナルは、ほとんどの補正作業をトーンカーブだけで完結させる場合が多い。ここではトーンカーブの基本的な使い方を見ていくことにしよう。 まずはトーンカーブの各部名称と機能を見てみよう。トーンカーブダイアログはイメージメニュー→“色調補正”→“トーンカーブ”を実行して開くことができる。トーンカーブダイアログでは、「入力レベル（補正前のデータ値）」に対する「出力レベル（補正後のデータ値）」を数値入力、あるいはカーブを動かすことで設定を行う。 1－出力レベル（補正後のデータ値） 2－コントロールポイント 3－ハイライトのポイント 4－シャドウのポ
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──サイトチェックに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術を紹介する。Webサイトが完成しても即納品というわけにはいかない。不具合がないかを検証することもWeb制作の一部といっても過言ではない。ここではチェックツール活用例を紹介する。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツ
MdN Design｜総合情報サイト
クライアント企業にとって「ケータイ活用」は、単にWebサイトを制作するだけの話ではなくなってきた。たとえば、QRコードからケータイサイトへと誘導する例では、ユーザーが思わずアクセスしてしまうものと、そうでないものがある。その差はチラシなどの集客ツールによるところが大きい。今やWebサイトを用意して待っているだけが「ケータイWeb制作」ではない。リアル空間や紙ツールなどと連携し、各々が得意な役割を受け持ち、トータルでの成果を狙うことも必要な場合がある。たとえば、ケータイメルマガで顧客の囲い込みをしてPC通販や店舗での売り上げに誘導する、といった活用がそうだ。 さまざまなメディアを複合利用している大企業では、最近「Attribution Model」（要因モデル）という言葉が話題に上るという。ケータイに限らず、各メディアやツールがコンバージョンにどう寄与するのかを探ろうという試みだ。旧来のマー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshopの上級者でさえなぜか曖昧な5つの基本機能 - MdN Design Interactive