【Web デザイン】 『現場でかならず使われているWordPressデザインのメソッド』の著者「WP-D」メンバーによる特別座談会
Webデザイン | Web デザイン | 特集記事 | デザインってオモシロイ -MdN Design Interactive-
【Web デザイン】 『現場でかならず使われているWordPressデザインのメソッド』の著者「WP-D」メンバーによる特別座談会
今さら聞けない！ レンタルサーバの選定と便利な使い方 第1回 - MdN Design Interactive
第1回 レンタルサーバの基礎知識 レンタルサーバを選定する際に、何を基準に選定を行うだろうか？ 一言でレンタルサーバと言っても「共用サーバ」、「専用サーバ」、「VPSサービス」、「クラウドサービス」などのさまざまな種類が存在する。自分の案件がどのサーバにマッチしているかを見極めるには、各サーバの性質や特長を理解しておくことが重要だ。それぞれのサーバの特徴を抑え、案件にマッチしたサーバを選定することができれば、余計な作業やトラブルが発生することも少なくなり、これまで以上にWeb制作に専念できる環境を自分で整えることができるはずだ。 ここでは、知っていそうで知らない各種サーバの特徴やメリットを解説しよう。 解説・文：阿部正幸（KDDIウェブコミュニケーションズ） ■サーバの種類と特徴を捉える ここでは各サーバの特徴を紹介する。サーバのことがよくわからないという人は各サーバの違いを整理しながら、
イラストを素敵に 描く、見せるメソッド36 - MdN Design Interactive
基礎の話から入稿データのしあげ方まで イラストを素敵に描く、見せるメソッド36 仕事にせよ、趣味にせよ、イラストを描く人は、気になることがたくさんあるはずです。基礎的なことから、線や塗り、さらには背景の描き方。そして最近では自分の作品集を自分でデザイン、制作する人もいます。そういった人は、デザインや印刷のことももっと知りたいと思っているのではないでしょうか。そこで今月の特集では「イラストを素敵に描く、見せる」ためのメソッドを紹介。イラスト制作に関して総合的に、多角的に迫ります。 ※今回の記事の解説や図版掲載は、Photoshop CS3とIllustrator CS3で行っています 線と塗り編1 ラフから線を整理する方法を知る ブラシの設定によって抑揚のある描線が描き出せる 講師： Okonikk url： www.bldg-jp.com/o/Okonikk/
MdN Design｜総合情報サイト
スマートフォンに描くグラフィック スマートフォンの本格的な普及にともない、FlashコンテンツをスマートフォンのWebブラウザに移植するという案件は増えていくことだろう。人気のアバターサービスであるアメーバピグもその一つだ。本記事はいくつかの実装方法を挙げて、メリット・デメリットとピグで採用した方法を紹介する。 解説／平松紘典（株式会社サイバーエージェント） BROWSER／iOS、Android キャラクターの作成 ここでは、グラフィックの一部の色・形などがそれぞれユーザーによって恣意的に頻繁に変更されるケースを中心に考え、具体的な実装方法について紹介する。 ケースの具体例としては、キャラクターの新規作成・編集画面がこれに当たる【01】。このようなケースで大きなポイントの一つとなるのが、ボタンタップなどユーザーのアクションから、結果の描画までのタイムラグをいかに少なくするかという点だ。W
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
グーグル、東日本大震災の被災地でGoogleストリートビューの撮影を開始 - MdN Design Interactive
米グーグルは7月8日、東日本大震災の被害状況の記録・公開・保存を目的として、被災地でGoogleストリートビューの撮影を開始したと発表した。 同社によれば、今回の取り組みにより、世界中の科学者や研究者だけでなく、一般の人々がこうした情報にアクセスできるようになり、地震や津波が引き起こす被害を知るきっかけになることを期待しているとのこと。 撮影対象は東北地方から北関東の主要都市および海岸地域。撮影期間は3～6ヶ月間の予定で、すでにストリートビューのサービスが提供されている地域については、今回新たに撮影された画像に置き換わるとのこと。 「東日本大震災の被災地でのGoogleストリートビューの撮影」 Google Japan Blog URL：http://googlejapan.blogspot.com/ 2011/07/08
2色刷り風のレトロタッチで雰囲気よく仕上げる - MdN Design Interactive
2色刷り風のレトロタッチで雰囲気よく仕上げる 制作・文＞fukkie. URL＞www.fukkies.com/ 使った道具や素材＞Photoshop/Illustrator/絵の具/かすれのテクスチャ まず、イラストの方向性や構図を決める。イメージが固まったらIllustratorを起動し、楕円や四角形を組み合わせてバスなどを描いた 1-1 。このとき楕円形ツールや長方形ツールなどは使わず、ペンツールでざっくりとしたラインを描き、温かみを出している 1-2 。また各モチーフごとにレイヤーを分けた。
MdN Design｜総合情報サイト
text-shadowはその名のとおり、テキストに影をつけるプロパティだ。うまく使えば画像を使わずとも、テキストを際立たせることができる。運用の効率化や、テキストコピーができるなどメリットも多い。 基本的な指定方法は、テキストから影までの距離（縦、横）とぼかしサイズ、影の色を指定して調整する【1-1】。CSS3でよく使われる、-moz-や-webkit-などのベンダープレフィックスの記述は、textshadowでは必要ない。カンマで区切れば、1つの要素に対して複数の影を指定できる【1-2】。また、影の色はrgba（半透明）で指定することもできる。影を半透明にしておけば、どのような背景色でも自然になじませることができるので便利だ【1-3】。 【1-1】「ぼかしサイズ」と「影の色」は省略可能 【1-2】カンマ(,)区切りで複数指定できる。工夫次第で複雑な表現も可能だ 【1-3】カラーコードをr
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──サイトチェックに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術を紹介する。Webサイトが完成しても即納品というわけにはいかない。不具合がないかを検証することもWeb制作の一部といっても過言ではない。ここではチェックツール活用例を紹介する。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツ
WEB制作、プロの無料サービス活用術 第1回 - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──デザインに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための 82の活用術の中から、Web制作に使えるデザインに特化した無料オンラインツールの活用法を13点紹介する。デザインの幅を広げ、Webサイトの質を高める実践方法を試してほしい。 Tweet [technique 01] オンラインで本格的な画像編集をする 「pixlr」 [technique 02] 繰り返し用の背景画像を作成する 「Tiled backgrounds designer」 [technique 03] カラーパター
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MdN Design｜総合情報サイト
MdN Design｜総合情報サイト
MdN Design｜総合情報サイト