KEN WEB BLOG ~WEB・DTPスクール パソコン教室 KENスクールのインストラクターがつづるブログ~

みなさん『iPad』ってご存知でしょうか？

言うならば、巨大なiPod touchみたいな感じです。。。
 

こんなのです。→ http://www.apple.com/jp/ipad/

アップルコンピューターがiPadを1/28に発表しましたが、
日本での発売日はまだ未定。
 

米国では3月下旬位になるとの事です。

そんなiPadは、

• レスポンスの良い高解像度マルチタッチディスプレイ
• iPad専用に設計された12の革新的なアプリケーション
• App Storeで提供されている140,000以上のアプリケーション、ほぼすべてを利用することができる
• 厚さは約1.3cm、重さが約680gと、現在販売されている、どのノートパソコンや
  ネットブックよりも薄くかつ軽量

と、アップルホットニュースに記載があります。

すごいですね！

発売が待ち遠しいです！

ですが。。。

そんなことよりも！！

iPadは『 Flash に対応していない！！！』

と先日、Newsの記事を見付けました。。。

えぇ～っ！？

Flashは、聞いた事がない人はいない、使った事がない人はいない
と思えるほど、言わずと知れたWeb向け動画処理技術です。
 

そのFlashを再生するためのソフトウェアであるFlashPlayerは
絶大のシェアを誇ります。

では何故、それだけシェアがあるFlashをアップルコンピューターは
iPadに取り入れないのでしょうか…？

アップルコンピュータ側の意見では、
「Flashはバグが多く、Macintosh（マック）がFlashPlayerに
よってダウンするケースが多い。」
と、Flashを批判していました。。。

電車などでも使っている人を多く見掛けるiPhoneも同様、
Flashを取り入れないという意向のようで、その理由が、
「パソコンよりも処理能力の低い端末ではフラッシュを効率よく
実行できないため。」
だという事です。

Adobeはその批判を認めているようで、
「1年以上に渡りその問題の解決に努めている。」
との事で、iPadで実行可能なFlashPlayerを開発したそうです。

しかし、アップルコンピューターは、Flashの対策として
『HTML5 』を取り入れる傾向にあるようです。

過去記事のリンク

• HTML5
• HTML5続編

アップルコンピューターは、今後本当にFlashを取り入れないのか？

HTML5を取り入れるのか？

今後のアップルコンピューターとAdobeの展開が非常に興味深いです。

 --------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html
 

KENスクールでweb系の技術を学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

以前に一度「HTML5」に関しての記事を書きましたが、
最近また話題が沸騰してきたので、再度記事にしてみたいと思います。

現在、もっとも主流になっているHTMLのVerは、XHTML1.0です。
 

少し前までに使われていた（今もまだその時のまま使われている）ものが
HTML4.01です。

では何故HTMLに、このようなバージョンアップが必要か？
というところから説明します。

HTML4.01の時代には「HTMLを使ってデザインをする」という考え方が中心で
テーブルレイアウトを使用して、どのブラウザでも同じようなレイアウトデザインを
実現することに重きをおいてきました。

ただし、この方法には大きな欠点があります。
 

テーブルを本来の「表」としての使い方ではなく、
レイアウト用のフレームとして使ってしまうため、
コンピューターがデータを正確に理解することができません。

コンピューターが理解できないということは、
スクリーンリーダー（音声読上ソフト）などを使ってサイト閲覧をしている
視覚に障害のある方には、ものすごく不便な作りになってしまいます。

W3Cの目標とする
「全ての人にアクセスしやすいサイトデザイン（ユニバーサルデザイン）」
の考え方には到底およばないものになっていました。

そこで、もう少し厳密にルール付けされているXHTML1.0が推奨されました。
 

ただし、あくまで文章構造上のルールが厳密になっただけです。

簡単にいえば、見出しや段落、箇条書きなど
「その内容が何を表すのか？役割をつける」ということになっただけです。

それだけでは不十分なため、さらに
「全ての人にアクセスしやすい」ということを念頭にHTML5が作られています。

以前よりも構造を明確にするために

• 本文内の前置きを表す<header>タグ
• メインの文章を表す<article>タグ
• ナビゲーションを表す<nav>タグ
• フッターを表す<footer>タグ

上記のようなタグを使用すれば、2ページ目以降でも、
同様の内容が記述されることが多い部分は飛ばし、
本文の部分だけを読むことができるようになります。

まだまだ噂の領域をでませんが、2012年にW3Cから勧告され、
2022年までには完全に普及すると言われています。

ちなみに・・・既に多くのモダンブラウザには実装されており、
今から十分練習できます。
 

ただし気をつけなければならないのが・・・
InternetExplorerに関しては、「8」でさえ実装されておりません。

「9」に期待ですね^^

参考サイト　W3C　「HTML4とHTML5の違い」

http://dev.w3.org/html5/html4-differences/Overview.html

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html
 

KENスクールでHTMLを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

DTPを勉強していく上でデザインは欠かせないもの。
 

デザインの中でも「ユニバーサルデザイン（Universal Design）」
というのがあります。

ノースカロライナ州立大学のユニバーサルデザインセンター所長であった
ロナルド・メイス氏が提唱し、文化・国籍・性別などを超え、
できるだけ多くの人が利用可能であるようなデザインにすることを言います。

ユニバーサルデザインには「7原則」があります。

• 原則1.　誰でも公平に使えるものであること
• 原則2.　使う上での自由度が高いこと
• 原則3.　使い方がわかりやすく、理解しやすいものであること
• 原則4.　必要な情報が、どんな人にでもきちんと伝わること
• 原則5.　安全であり、万一の事故に対する対策を持つこと
• 原則6.　自由、快適に使えること
• 原則7.　使いやすい大きさと広がりが確保できること

すべてにこれを満たしていくのは難しいけど、
「誰にでもやさしいデザインをする」のは大事ですよね。

• 「事実」や「伝えたいこと」を明確にする
• 「最低これだけは伝えたい」ことを、はっきりさせる
• 行間・文字間に注意する
• 太字や大きな文字などを効果的に用いて、メリハリをつける
• 目を引いて、読む気を起こさせる
• 言葉での説明より、図や写真を用いた方が、わかりやすいものもある

など制作の中で考えてデザインしましょう。

ユニバーサルデザインについて、この本もオススメです。

読んでみてください。

「+DESIGNING」

http://www.plus-designing.jp/

--------------------------------------------------------------------------------

パソコンスクール KENスクール池袋校　Webインストラクター
http://www.kenschool.jp/school/ikebukuro/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

今回はIT系ニュースをもとに「注目のスキル」を紹介します。
 

両方とも2009年12月後半のニュースを参考にしました。

まずは下記の情報サイト「JOB＠IT」から抜粋しつつ。
 

現在のIT系就転職市場ではWeb/モバイル、ゲーム業界の求人が
緩やかに回復の兆しといった内容が掲載されています。

なかでもWeb/モバイル系では・・・

• 「手を動かせるディレクター（プロデューサー）」を求める傾向が強い
• LAMP環境での開発経験者を中心に、書類選考通過率が上昇した。

手を動かせるディレクターとは

• HTML/CSS
• Dreamweaver
• Photoshop
• Illustrator
• Flash

といったデザイン系の制作スキルを持ちつつ、
ディレクションの能力ももった人材が必要とされている。

もうひとつ、LAMPとは

• Linux
• Apache
• MySQL
• PHP（Perl・Python）

を用いた、データベース連動のWebアプリケーション開発技術のことです。

MSN産経ニュースでも
ネットショッピング、オークション、オンラインゲームなどの需要が倍増する
と掲載されています。

つまり、Web業界ではクリエイターにデザイン・制作系の記述はもちろんのこと、
今ではディレクション能力・プログラミング能力を求めるようになっています。

最近、受講生の方から話を聞くと「自分に付加価値」を求める方が多く感じます。

Kenスクールでインストラクターとして働いていて、本当に良かったと思えることが、
私たちデザイン系のインストラクターだけではなく、
プログラム専門のインストラクターが多数在籍をしていて、
ほぼ全校舎で毎日受講が可能なところです。
 

受講生の方に、現在業界で求められているスキルを
それぞれ専門のインストラクターからご指導できます。

今後も、下記のようなニュースで
「必要とされる技術」の紹介ができればと思っています。

Kenスクールでは無料セミナーで紹介もできますので、
興味のある方はぜひご参加ください！

Kenスクール　「Webプログラマー無料セミナー」
http://kenschool.jp/Seminar/webpg_semi.html

Kenスクール　「ディレクションPro講座」
http://kenschool.jp/Webdtp/w_t_temp.html

MSN産経ニュース　「ネットショッピング市場、２６年度に倍増へ　高機能携帯の普及で」
http://sankei.jp.msn.com/economy/it/091223/its0912232029000-n1.htm

JOB＠IT　「第6回　SI／NIに復調の兆し？ 転職市場は底を脱したか」
http://www.atmarkit.co.jp/job/jirei/kiji/front/06/01.html

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebのディレクターを目指したい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

インターネットに少し変わった面白いサービスがあります。

googleのような文字を作成してくれるサイトが紹介されています。

http://googlefont.com/

使い方はいたって簡単で、
テキストボックスに任意の文字を入力して「Create logo!」というボタンを押すと、
画面上にgoogle風のテキストが表示されます。

色合いが気に入らない時は、
再度「Create logo!」を押すと色違いパターンが作成できます。

「download logo」というボタンもありますが、
ロゴの上で右クリックすることでも画像として保存することが可能です。

機能は違いますがAIRを使用したアプリケーションで、
任意の文字を入力するとアイコンが作成できるというものも存在しております。
 

このように、任意の文字を入力するだけで
自由にデザインしてくれる機能を使用することで、
デザインの幅が広がったり、配色をする上での参考になったりします。

残念ながら半角英数記号にしか対応はしていないので、
日本語でのロゴは作成できませんが、
様々なサービスや機能を使用することで作業効率を上げたり
デザインパターンを参考にしたりすることができるようになります。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

先日、10数年ぶりに友人と会いました。

久々の再会だったのですが、その友人は幼少の頃からから
「赤が緑に見える」等、違う色に見えると言っていたのを思い出しました。

当時、私は友人が違う色を言っている時「何言ってるんだよー」
なんて思っていたのですが、小学生の時に分かるはずもなく、
大人になって改めて実感させられました。

色覚障害の持ち主ということです。

調べてみると、
「日本人の男性20人に1人、女性500人に1人、色覚障害の人がいる」
と記載がありました。
 

正直、そんなに多いとは考えておりませんでした。

私は、Webサイトや広告、ポスター等を制作する際、
配色のバランスは当然意識しております。
 

しかし、『違う色に見える』というのは深く考慮しておりませんでした。
 

反省しております。

何が言いたいのか？と言いますと、
『正常な視力の人のみがWebサイトを閲覧しているのではない』
ということです。

勿論、img要素にはalt属性を付けておりますが、画像だけではなく、
文書や背景色等も意識しなければならないということです。

読みやすい文字にするために、明暗の差を出す
というのは皆さんご存知かと思います。
 

コントラストも同様で、その差が大きいほど文字は読みやすくなります。
 

ですので、明暗の差とコントラストの差を意識しなければいけないということです。

東京大学の教授や、日本塗料工業会など共同で、
色覚障害や白内障の人にも見やすい色見本を昨年5月に作成したそうです。
 

色覚障害の人が見分けにくい色は分かっていたそうですが、
色覚障害の人達に考慮した色見本の作成は今回が初めてだったようです。

どのような色見本なのかといいますと、
「色覚障害を持っている人と持たない人を、延べ40人程度集め、
2000種以上の色の紙を見てもらい、全員が認識できる20色を選び出した。」
ということらしいです。

2000種類以上もの中から、20色ってすごいですよね。
 

これらの色を使って、今後は様々な用途で
色覚障害者に考慮したものを作ることができると思いますし、
WebやDTP等のデザイン業界でも徐々に浸透していくかと思います。

富士通のサイトでは、色覚障害の人の見え方をシミュレーションする
ColorDoctorというフリーソフトが配布されております。

http://jp.fujitsu.com/about/design/ud/assistance/colordoctor/download.html

また、色覚障害の人や白内障の人に配慮した
文字色と背景色の組み合わせをチェックできる
ColorSelectorというフリーソフトも富士通のサイトで配布されております。


見やすさを○と×で表記してくれるソフトです。

http://jp.fujitsu.com/about/design/ud/assistance/colorselector/download.html

皆さんも、配色の際には是非活用してみてください。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html

普段使われているIllustrator…
どんなソフトにも何気なく使用するだけでは
なかなか気づきにくい隠れた機能が存在します。

今回は、必ずと言って良いほど使用する
「カラーパレット」についての小技を紹介します。

一つ目は
選択されているカラーに対して簡単に「補色」を設定する
方法です。

設定の仕方はカラーパレット上の「スペクトル」と呼ばれる色が
グラデーションで表現されている場所に対して
「Ctrl」キーを押しながら 「クリック」をすることで補色が設定されます。



今回の例では赤の補色である青系に色が変更されたことがわかります。

二つ目は
選択されているカラーに対して簡単に
「明度と彩度の比率を保ちながら変更」する
方法です。


設定の仕方はカラーパレット上のカラースライダを
「Shift」キーを押しながらドラッグすると
現在設定されている色に対して
「明度と彩度の比率を保ちながら変更」することが可能です。



今回は緑色の設定が明るくなったり、くすんだりするようになりました。

三つ目は
表示モードの変更です


設定の方法はカラーパレット上のスペクトル部分を
「Shift」キーを押しながらクリックします。



本来はオプションから設定を変更しなければならない表示モードですが
意外にボタンが小さくて押しづらいと思う方も多いのではないでしょうか？

特にグラデーションの初期設定は「グレースケール」なので
わざわざ「ＣＭＹＫ」戻すのも面倒です・・・
 

このように普段使われている「カラーパレット」と呼ばれる機能一つをとっても
細かな機能が隠されていることがわかります。
 

皆さんも興味がありましたら様々な機能を勉強して
自分にとってベストな操作感を手に入れてみてはどうでしょうか？


優れたデザインがあっても存分にソフトの機能を活用できないと
せっかくのアイデアも形にすることができませんから。

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Officeインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web・DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

みなさ～ん、iPhone持ってますか？

iPhone上で動かせるアプリケーション
「iPhoneアプリ」が10万本！！！を超えたそうです。

「iPhoneアプリ」はAppleの「App Store」サイトで入手できます。
 

「App Store」は2008年7月に開設され、
その当時は約500種類のアプリがありましたが、1年ちょっとで「200倍」です。

その背景には、個人で作成したアプリでも「App Store」に登録できるところです。
 

専用のソフトウェア開発キットを使って作成し、
有料のiPhone Developer Programに登録し、
アップルから開発IDの発行を受けます。

作成したソフトは「無料」か「有料」で配布します。
 

有料の場合、売上の70％が還元されます。

これで一仕事してみるのもおもしろいかもしれませんね。

アプリの中には私達の日常の中の他愛のないものがアプリになっていたりします。
 

興味のある方、ぜひチャレンジしてみてください。

iPhoneアプリ人気ランキング

http://www.appbank.net/appranking

--------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html

KENには「極グラフィック」という授業カリキュラムがあります。
 

PhotoshopやIllustratorのソフトは使えるけど、
「デザイン」ができない…という方や、「いつもなんとなく作ってます」という方に、
キチンと商用デザインのルールを意識して作っていただく
（「デザイン」する）という内容です。

そして、その講座の中に「名刺のデザイン」があります。

名刺という小さな紙の中に、どんな情報を入れなくてはいけないか、
どんな風に、どんな人が使うのか、などなど考えて文字などを配置します。

偶然見つけたインターネットの記事の中に、
アートディレクター/クリエイティブディレクターの佐藤可士和さんの
「名刺について」の記事が掲載されていました。

その中で「名刺はシステムのデザインだ」というような
名言があったのでご紹介します。

うーん、たしかに！

実際に作ってみるとわかると思いますが、
なんでもかんでも載せたらいい名刺にはなりませんし、
文字間隔や大きさも、ほんの少し変更を加えるだけで「収まった感」が変わります。

興味のある方は読んでみてください。

http://xbrand.yahoo.co.jp/category/product/3804/1.html

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでWebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html
 

CSSを完全に習得しても・・・
（って習得できた！って思える人はいるのでしょうか・・？）
それでも実際の仕事では、全て上手く使いこなしていくのは難しいことです。
 

これはとっても残念なことですが、CSSの解釈が異なったり
バグが存在するブラウザがある限り続いていく問題です。

それを解決する方法としてCSSハック・・・
各々のブラウザにのみ対応したCSSを分けて記述する方法があります。

とても難しいそうな感じがしますね。

でもwebデザイナーとしては避けては通れません。

CSSの基礎を一通り習得した後は、定番のCSSテクニックを覚えて
CSSハックの適用方法も学んでおきましょう！

詳しくはKENスクールの「CSS上級レイアウト講座」で学習してみましょう。
 

出来れば併せて「ワークフロー」について大まかに把握しておくといいと思います。
 

デザインの仕様書をまとめた「CSSプランブック」などは
デザイナーによって作成される場合が多いのでぜひ知っておきましょう。

CSSプランブックとは・・・
例えば、スタイルの一括指定やプロパティを書く順序などの
ローカル・ルールを定めておくと作業の簡素化、効率化ができます。
 

ローカル・ルールを定めずに作業を進めると突貫工事になる危険性が高く、
CSSの無駄な記述が増えて肥大化にもつながってしまいます。
 

必須の作業ではありませんが得られる効果は大きいでしょう。

膨大な量のページのレイアウトをまとめていく作業・・・
回り道をしているようでこういった細かい作業も必要なのですね。

※参考文書　webcreators vol.51

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Webインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html

--------------------------------------------------------------------------------

KEN School　関西方面オープンしました!!

【関西ブログ】
http://www.kenschool.jp/info/contents/blog_kansai.html

【関西オープンページ】
http://www.kenschool.jp/info/contents/op_kansai.html