印刷に耐えうるWebページの構成とは

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

前回のWeb系コラムではギャラリーのように写真を配置するレイアウトについてのお話をしました。
今回は、印刷する可能性のあるWebページを準備する際の注意点について焦点を当ててみたいと思います。

WiFiやタブレットが普及したとはいえ、紙媒体で情報を取り扱いたいケースはまだまだ多く存在すると思います。
ユーザー側で印刷する必要のある申込書や地図などをWebページで表示する際は、CSSを画面表示用と印刷用に切り分けるということも、一般的に行われるようになってきています。

印刷を行う際は、インクの節約やプリンター自体の制約のため、モノクロで印刷する機会も多いと思います。画面上では情報はカラーで表示されていますが、モノクロで印刷された紙では、その色情報が失われてしまいます。
例えば、赤文字と青文字の違いや、鮮やかな赤色とくすんだ赤色の違いなどの情報は、モノクロ印刷時には再現されません。このような場合の対応策としては、
重要な文字情報については文字自体の太さやフォントサイズを変更することで、モノクロ印刷で色情報が失われたあとでも、情報自体の重要性を再現できるような工夫をすることが一般的です。
重要な情報と重要ではない情報を、文字の形状を変えて区別することで、色情報が失われても優先順位を保持することが可能となります。

net market share

例として、上記画像の中央近くにあるブラウザシェアのグラフを見てみましょう。
このグラフには色情報を失ってもそれぞれの要素を識別できるような工夫がなされています。各要素（ブラウザシェア）に補助用の棒線を用意し、文字情報で各要素の説明を把握可能とすることで、画面上では色による直感的なブラウザシェアを把握しつつも、印刷した紙媒体でもシェアの情報を判別しやすいデザインになっています。
例えば、このグラフ部分をモノクロに加工した場合は以下のようになります。
色による要素の識別はできなくなりましたが、文字による情報自体は取得可能であり、そこからシェア情報を判別することが可能です。

Google Map等の地図に店舗等の場所を掲載することも最近では一般的ですが、
モノクロで印刷すると見づらくなってしまう場合には、別途モノクロ印刷用の地図を用意する必要が生じるかもしれません。
印刷することが予想されるコンテンツにおいては、色情報が失われても必要な情報を判別できるような工夫をすると、ユーザビリティをより向上させることが可能となります。コンテンツ作成の際に、ぜひ参考としていただければ幸いです。

（担当：斉藤　万幾子）

直近開催のお薦め講座のご紹介

投稿日時：

Access 2007 初級 一日速習研修

日程
詳細

アクセスの基礎はこれでバッチリ！簡単なデータベース作成を通じて、アクセスの基本操作からリレーションシップの基礎までを学ぶ講座です。
本コースではAccess2007を利用した講習を行います。

HTML/CSS入門 一日速習研修

日程
詳細

ホームページやブログ作成時の基本スキルであるHTML/CSSの基礎を集中的に学習するセミナーです。ホームページの仕組みを知りたい方はもちろん、既製のブログや掲示板サイトのカスタマイズ技術を覚えたい方、さらには自分自身でWebサイトを構築する際の基本を学習したい方にオススメです！

HTML/CSS活用 一日速習研修

日程
詳細

Webページ作成スキルであるHTML/CSSの基礎を習得した方向けに、ヘッダー・フッター・サイドメニュー・グローバルナビといった一般的なWebページレイアウトの実装方法や、視覚的に分かりやすいボタン等の作成方法、さらにWebページ作成時に押さえておきたいデザインルール等について実践的に学習するセミナーです。HTML/CSSの基本スキルを習得した方が、実際にWebページを作成し始める前に押さえておきたいポイントが盛りだくさんです。Webページを効率的に作成したい方にオススメです！

Javascript入門 一日速習研修

日程
詳細

本格的なWebページを作成する際には、Webページ内の表示をアニメーションで切り替えたり、ボタンの押下に合わせて表示のオン・オフを制御したりといった「ページ内での動的な表示切り替え」を行いたいケースも頻繁に発生します。このような「Webページ内での動的な変更」を可能にする基本技術であるJavascriptの基礎を本セミナーでは習得します。使い勝手の良いWebページ作成には必須の、おすすめセミナーです。

Office2007/2010 乗り換え速習研修

日程
詳細

Office 2003以前のバージョンをお使いの方向けに、Office 2007/2010の新しいインターフェイスや機能をご紹介し、短期間でスムーズな移行が可能となるようにサポートをする講座です。
同時に、Office系アプリケーション全般を通じ、バージョンを問わず覚えておきたい「業務効率を上げる便利テクニック」も数多くご紹介します。

Windows 8（後編）

投稿日時：
カテゴリ：VBA・Javascript・PHP・その他プログラミング全般

2012年10月、Microsoft社からWindows 8が発売されました。
新しいWindowsに興味を持つ人、買うか待つか迷う人も多いと思われますので、今回はWindows 8についてのお話をしたいと思います。
前回の「前編」では、Windows 8以前の Windowsの「歴史」に触れましたが、今回はいよいよ Windows 8自体のお話をします。

Windows 8を一言で表現するなら「Windows 7のタブレットエディション」となります。

Windows 8/NT6.2（2012年）は、Windows 7と同様、Vista/NT6.0をベースに改良したものです。「8」とあるが、これは8番目のWindowsという意味であり、NTのバージョンは6.2となっています。

仮想化ツールの「Hyper-V」、外部メディアから起動可能な「Windows To Go」、USB3.0の標準サポート等、新機能や改善点は多々ありますが、Windows 8の最大の特徴は新GUI「Modern UI（旧Metro）」です。


Modern UI

Modern UIでは、スタートボタン、ガジェット、クラシックテーマ、Aeroの一部が廃止され、従来のWindowsとはまったく異なった操作感になっていますので、Windows 8の導入を検討する際は、この新GUIと付き合えるかどうかを検討する事になります。

売上が低迷している各PCメーカーやPC系の雑誌ではWindows 8を起爆剤として推していますが、発売前からWindows 8には多くの「酷評」がありました。

酷評要因の一つ目は「Modern UIの押しつけ」です。
新GUI「Modern UI」はあきらかにタッチパネル式のタブレット向けに設計されたGUIですが、Windows 8ではModern UIを従来のデスクトップPCやノートPCの標準にも据えました。

Windows 8には、使い慣れたGUIを切り替えてまで導入する目玉的要素が今のところは見当たらないというのが私個人の見解です。せめて旧GUIと切り替えられるような機能を実装してくれたら良かったのですが。そう言えば、MS OfficeでもGUIをリボンに変更して、同じ酷評が出ていたことを思い出します。

酷評要因の二つ目は「iPadやAndroidとの比較」です。

タブレットPCでは活躍が見込まれるWindows 8ですが、同分野ではiPadやAndroidがすでにシェアを得ています。Windows 8のタブレットはiPadやAndroidのタブレットと比較すると価格が高めですので、iPadやAndroidと「同じ事ができる」だけでは不十分で、それ以上の事ができないとWindows 8を導入する理由はなかなか見いだせません。

それでは、Windows 8でなければ出来ないこととは、何でしょうか？
例えば「MS Officeが使用できる」ことは、その最も分かりやすい候補の一つでしょう。これには期待を寄せていた方も多いと思われます。しかし、閲覧するだけならともかく、タブレットでExcelやPowerpointを快適に操作する事が出来るのでしょうか？結局はノートPCの方が良いのではないでしょうか。この点は疑問点であり、不安要素でもあります。

今までWindowsで使用していたほとんどのアプリはWindows 8でも使用可能なのは魅力的ですが、果たしてタブレットで使用するメリットはあるのでしょうか？
Web、メール、電子手帳、音楽・動画プレイヤー、地図等のアプリであれば、安価なiPadやAndroidのタブレットやスマートフォンで十分に対応可能です。

それならば！！　と各メーカーが揃って出してきたものが、ノートPCとタブレットPCが合体したハイブリッド型PCです。一見するとノートPCですが、画面部分が取り外しできてタブレットにもなる新スタイルのPCですね。

なるほど、ハイブリッド型PCであれば、Webブラウザならタブレットで使用する、MS OfficeならノートPCで使用するといった具合に、使用するアプリに応じて切り替える事ができます。この新スタイルPCはAndroid版では前から細々と出てはいましたが、Windows 8の登場により本格的に市場に進出することになりました。テレビのCM等で見た方もいらっしゃると思います。

新スタイルだけにその実力は未知数ですし、普及するかどうかにはもう少し時間を見てみる必要があると思います。その未知数にかけてみるも良いですし、あるいはWindows 8の導入はしばらく見送り、次のWindowsに期待するのも良いと思います。Windows 7のメインストリームサポートは2015年1月13日までですが、それまでに次のWindowsが登場するかもしれません。

いずれにしても、現時点ではWindows 8を積極的に導入しなければいけない理由は、残念ながらあまり見当たらないのではないかと思います。特に、Modern UIについては、その評価が固まるまでにはある程度の時間が必要かと思います。MS Officeのインターフェースがリボンに変わった際も、その評価が安定するまでにはそれなりの期間が必要でしたので。
あくまでも私個人の見解ではありますが、少しでもご参考になれば幸いです。

（担当：奥田　英太郎）

Web制作のソフトウェア

投稿日時：
カテゴリ：HTML・CSS・Webデザイン
Webサイトを作成する際には、どのようなソフトを使用することが多いのでしょうか？
Webページの作成・編集を行う際は、HTML/CSSについてはAdobe社のWebオーサリングツール（編集ソフト）のDreamweaver、画像については同じくAdobe社のPhotoshopなどがよく使用されています。ただし、これらのソフトを使用する際には、少し気をつけた方が良いと思われるポイントがあります。

まず、Dreamweaverについてですが、HTML/CSSのまったくの初心者の方が、いきなりDreamweaverを使用することはお勧めしません。
HTML/CSSの作成（コーディング）の際には、必ず守らなければならないルールがいくつか存在します。
そのルールをきちんと習得する前にDreamweaverのような編集ソフトを使用しても、簡単なWebページを作成することは出来るかもしれませんが、より高度なページや使い勝手の良いページを作成しようと思った際には、基本的なコーディングのルールを理解していないため、作成が難しくなる状況が発生する可能性が高くなります。すなわち、編集ソフトを使用する本来の目的である「生産性の向上」には結果的に言えば直結しない可能性があるということなのですね。
まずはコーディングの基本ルールをしっかり習得した上で、さらに生産性を向上させるためにDreamweaverを活用するというのが、本来のあるべき姿であると私は考えています。

一方で、画像の作成についてはPhotoshopを活用することが一般的です。画像の色調整やトリミングはもちろん、様々な効果をボタン一つで設定することが可能ですので、本格的に画像編集を行う場合にはPhotoshopを利用することが殆どです。ただし、無料でPhotoshopに近い操作ができるWebアプリケーションも存在します。Web制作を本職にする方はPhotoshopは必須ツールの一つとなると思いますが、Webページを時々更新する程度でしたら、無料のWebアプリケーションでも十分に対応可能なケースも多くあります。
当校ではこのような「Webページを時々更新する際に、手軽に画像編集が出来たら」という方向けの講座である「Webデザイン作成入門」セミナーも開講しています。
Photoshopを購入する前にWebアプリケーションを使って練習をし、画像作成・編集に関する感覚をつかむということも、よい方法ではないかと思います。

いずれにしても大切なポイントは、どのソフトを使用する場合であっても「基本をしっかり押さえたうえで」多くの練習をこなし、経験を積み重ねることになります。基本を飛ばしてソフトに頼っても、結局は遠回りになってしまう可能性が高いですので、まずはしっかり基本を学習することをおすすめします。

（担当：斉藤　万幾子）

プレゼンデザインの探し方

投稿日時：
カテゴリ：プレゼンテーション・ロジカルシンキング

ビジネスパワーアップコラム＜プレゼン編＞　第十五回

前回のプレゼン編コラムでは、「プレゼンデザインの決め方」と題して、シナリオと並んで大切なポイントである「デザイン」に関するお話をしました。今回は前回の話を踏まえ、効果的な背景写真等の「イメージ」を効率的に探す方法についてのお話をしたいと思います。

デザインを考える上では、背景写真等のイメージがキーポイントとなるケースが多く存在します。前回のコラムで述べた通り、伝えたいイメージに即した背景画像等を活用することで、聴衆が理解しやすく、また記憶に残りやすいプレゼンが可能となることも多いからです。

一方で、私のようにデザインが元々「苦手」な場合、効果的な画像をどのように探すのかということは、常に大きな課題となります。実際、私自身が背景画像まで含めたプレゼン資料を作成する場合には、プレゼンのシナリオを検討する時間よりも、画像イメージを探す時間の方が多くなることもあります。そこで、私は自分自身の経験も踏まえ、「探す場所を決めておく」ことをお薦めしたいと思います。

画像については大きく、

・無料
・有料

の2種類が存在します。有料画像の方が品質（＝画像のきめ細かさ）が高く、また種類も豊富ですが、無料画像でも高品質のものもありますので、うまく使い分けをすると良いと思います。また、画像自体はWebで検索し、そのままダウンロード（有料であればオンライン購入）出来るものが一般的ですが、有料であれば後述する「素材集」という形で、CD-ROM等に画像をまとめて収録し、販売しているものもあります。私個人の感覚では、有料の素材集を2-3点購入しておき、基本はこの素材集を活かすと良いと思います。その上で、足りない画像はWebから検索するという方法ですね。

それでは、私自身が普段使用しているWeb素材サイトおよび有料素材集をご紹介したいと思います。

◆ 無料素材

stock.xchang

無料素材について私が最優先で探す場所がこの「stock.xchang」です。ユーザー登録が必要であることと、全て英語であることからやや敷居は高いかもしれませんが、画像自体は無料であるにも関わらず、高クオリティのものが多いです。キーワードについても英語で入力する必要がありますので、必要に応じてオンラインの和英辞典（例：英辞郎）を併用すると良いと思います。

Office.com

Microsoftが提供する、画像やクリップアート等の素材集です。Officeユーザーであれば無料で使用することが出来ます。ただし基本的には「プレゼンやドキュメント等、直接その資料を販売しないもの」に対する使用に限定されており、直接的な商用利用（例えば、画像自体をまとめてCD-ROMに保存し、販売するなど）は認められていません。この点は後述する「ロイヤリティーフリー（RF）」でも補足したいと思います。

◆ 有料素材

素材辞典

私が個人的に最もお薦めしたい素材集が、この「素材辞典」です。ジャンル毎に画像データが200枚（100種類x2サイズ）収録されて、実売6,000円前後です（アマゾン等でも購入可能です）。人物写真の豊富さに定評があります。1-2種類程度購入しておくだけでも、色々な場面で活用できますので、ご興味をお持ちの方はぜひご確認いただければと思います。なお、現在は素材集だけでなく、オンラインで1枚から購入可能なプランも登場しています。

stock.foto

私が素材辞典と併用して、よく使用する有料素材サイトです。写真の枚数の豊富さもさることながら、一枚当たりの価格が安いので、安心して使用することが出来ます。英語メインのサイトと異なり、日本人等のアジア系人物画像も多いので、その点でもお薦め出来ます。

iStockphoto

非常にクオリティの高い画像を数多く収録しています。ポスター等にも使用可能な高解像度画像もありますので、プレゼン用途以外でも検索する価値はあると思います。価格はやや高めの印象ですが、毎週数量限定の「無料画像」提供もしていますので、定期的に確認するのも良いかと思います。

以上が私が普段使用している素材集ですが、これ以外にも様々な素材集がありますので、ご興味をお持ちの方は「写真 素材集」などのキーワードで検索してみると良いと思います。

なお、無料・有料どちらの画像を使用する場合でも、画像自体の「著作権」には細心の注意を払う必要があります。著作権が設定されている場合、素材の使用方法（特に商用利用）については様々な制約があることが殆どです。例えば、Webサイトデザインやプレゼンテーションでの使用は問題ありませんが、パンフレットとして配布する場合には別途契約が必要になる、等ですね。従って、原則としては「ロイヤリティーフリー（著作権フリー）」＝「RF」 画像の使用を最優先で考えていただければと思います。

ロイヤリティーフリー（RF）の場合、このような著作権に関する問題は全てクリアされ、再販等の直接的な商用利用を除き、どのような用途であっても一度購入（無料であればダウンロード）すれば、後は自由に画像を使用できます。どのような素材集であっても、必ず「RF」または「ロイヤリティーフリー」の標記がありますので、画像検索の際は是非この「ロイヤリティーフリー（RF）」という点にも注意をしていただければと思います。

優れたデザインのプレゼン資料作成にはどうしても時間がかかりますが、綺麗に仕上がればその分だけ高い効果が期待できます。是非このような「素材集」を活用し、効果的なデザインに繋げていただければ幸いです。

なお、今回の「第十五回」をもって、プレゼン編コラムはいったん終了となります。来週からは「ロジカルシンキング編」がスタートしますので、お楽しみに！

（担当：佐藤　啓）