ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校では、集中授業期間中ですが、9月20日に特別講義としてH2O SPACEの谷口允さんにお越しいただき「Web制作最新トレンド～レスポンシブWebデザイン、CSSプリプロセッサー。変わる Web制作の常識～」と題して講義を行っていただきました。
前期の「業界研究授業」で学生から依頼させていただいた結果、この日にお越し頂けることになりました。

また、制作ユニットanygraphicaのデザイン担当として谷口さんと活動されている田代さんにもお越しいただき、デザインツールやコーディング方法のトレンドなどのデモを通じて紹介していただきました。



WebサイトをPCで見ていた時代から、スマートフォン・タブレットで閲覧する時代に入り、環境や操作方法なども変化してきました。その時代にあわせて制作を進めないと眠れな～いなんて事になってしまいます。
今の時代の設計、デザイン、コーディング、コード管理のツールやWebサービスを利用してより良い制作環境にするためのノウハウを話していただきました。

学校などでは、なかなか教えられないツールやWebサービスなどありますが、個人で自分に合った環境を模索していくのも、優れた作品制作には必要です。一度に全てを取り入れなくても、少しずつ試してみると良いですね。

翌日は、ベースキャンプ名古屋で行われた谷口さんのセミナー、WCAN mini vol.8『〜プログラミングのニガテ克服セミナー PHPで学ぶ、「コード脳」の鍛え方〜』にも参加してきました。



■アルゴリズム力
■分解力
■タイピング力
■読解力
■スルー力
■デバッグ力

などゲームを交えながら、プログラムが苦手な人に克服するコツなどをたっぷりと話していただきました。なんだか少し頑張れそうな気がします。
Webデザイン学科の学生でも、やはりプログラミングが苦手な学生もいますので、参考にしたいと思います。

先日、約3年ぶりに行われた「WCAN mini Markup」のLTをしてきました。内容は「Adobe InDesign」を使ったものだったのですが「Adobe Muse」も検証をしたので、今後に役に立つかもしれないなと、使い方を紹介しておきます。
とりあえず、体験版を試すためにAdobeのサイトからMuseをダウンロードします。

今回は、こんなサイトを作ろうと思います。

起動そして、準備

起動画面は正方形ですね。AdobeCS6シリーズとは違います。


まずは、新規Webサイトの作成です。ファイルメニューから新規サイトを選択してダイアログを表示させます。新しく作成するサイトの“横幅”“マージン”“パディング“を設定してOKボタンを押します。


最初はプランモードが表示されますので、ページや階層などを構築していきます。また、ヘッダーやフッターなど統一されたものは、マスターページに制作をすれば流用が簡単です。このへんは、「InDesignの操作に似ている」とよく言われてる部分です。
カーソルを合わせると左右下に「＋」ボタンがでてくるので、横はグローバルメニュー、下はローカルメニューのページが作成されます。


今回は6ページほどのページで作ろうと思います。これで、準備は完了です。

マスターページを設定

ヘッダーとフッターのデザインは統一して流用したいので、マスターページを設定します。マスターページもページと同様、左右に「＋」ボタンがありますので、複数作成することができます。「A-マスター」のサムネイルをダブルクリックすると編集ができるようになります。ツールは数が少なくシンプルです。


ヘッダー領域に“サイトタイトル”と“グローバルナビゲーション”、フッター領域に“コピーライト”を作成します。
グローバルナビゲーションは、ウィジェットライブラリ＞メニュー＞水平方向をドラッグ＆ドロップするとプラン画面で作成したページ数、ページ名を反映したメニューが生成されます。
ウィジェットライブラリを使うとHTMLが<li>でマークアップされますし、自動的にページリンクもしてくれます。


あまり複雑な形には変換できませんが、四角や角丸、グラデーションなど変更ができます。


ウィジェットライブラリーには他にもライトボックスやツールヒントを実装できる「コンポジション」や「スライドショー」、アコーディオン、タブつきパネルなどの「パネル」、「フォーム」なども用意されていて、JavaScriptやHTML, CSSを知らないとできない表現が簡単に取り入れられるようになっています。

フッター領域に配置したいアイテムは、右クリックをして「フッターアイテム」にチェックを入れておきます。チェックが無いと、領域に移動させることができません。



これで、マスターページは完成です。プランモードを確認してみると、すべてのページに反映されているのがわかります。

Topページの作成＆段落スタイルの設定

続いて、ページの作成をしてきます。テキストは他のグラフィックソフトと同じく、テキストボックスを使用します。


画像は、ファイルメニュー>配置で読み込みます。ハンドルや数値で大きさなどを決めます。最初からマスクが設定してあり、画像をワンクリックした場合はマスクの大きさ、ダブルクリックして枠が茶色っぽくなれば中身を変更することができます。ここは、他のグラフィックソフトのように“ダイレクト選択ツール”などツールの使い分けではないので、少々迷うかもしれません。


段落スタイルの設定は「InDesign」とほぼ一緒です。

1. 登録したいテキストにカーソルを合わせます。


2. 段落スタイルパネルで名前と段落タグ（p,h1～h6）を設定します。

これでHTMLに書き出した時に、設定したタグでマークアップされます。

その他の便利な設定

Museには、その他にも便利な設定が最初からついています。
まず、各オブジェクトには、最初からステート設定されており“通常”“ロールオーバー”“マウスダウン”“アクティブ”時のビジュアルを変更することができます。いまのWebサイトでは、ボタンのロールオーバーは必須になっているので、これはとても便利です。


ページ内のリンクも簡単に、ドラッグ＆ドロップでアンカーをつけられます。さらに自動でアニメーションの処理がされます。

HTMLで書き出し

サイトの確認は、プレビューモードで確認できます。


また、ブラウザでも確認ができます。


確認ができたら、HTMLで書き出せば終了です。
ディレクトリもわかりやすく、html, css, script, imageに分かれます。


また、パブリッシュをするとAdobe Business Catalystにアップされます。アップされるとアクセス解析など、独自の管理ツールが使えるようです。


Adobeのグラフィックソフトを使っている人であれば、簡単に操作することができると思います。Adobeが提唱している通り、htmlなどを知らない人でも簡単にとはいかないにしろ、手軽に数ページの静的サイトが完成できるのは、魅力的です。
また、コーディングができる人は、簡単にワイヤーフレームを作って、そのまま書き出したhtmlを使って作業を進めることで時間短縮にもつながるかもしれません。簡単にWebサイトを制作するソフトも色々とあると思うのですが、Museは構造がわかりやすくなっているので、html, cssのカスタマイズもすんなりできそうです。
今回サンプルとして制作したサイトはこちら。

今ぐらいのシンプルなメニュー数、ツール数でバージョンアップしていってくれると嬉しいですね。（今は、表組とかはできない、みたいです。）
書き出したら、とても長い記事になってしまいました。

追記：モバイル/タブレットレイアウト機能を追加した3.0が公開されているようです。

今回のテーマは「CSS3＋jQueryを実際に使ってみよう！」ということで、スピーカーの皆さんが、それぞれCSS3やjQueryを使った作例を説明されました。
CSS3の実装はやはりsafariが圧倒的です。safari4にバージョンが上がって、ブラウジングの高速化も進みました。

HTML5の話題もあり、今後の制作環境が垣間みれた気がします。

kazumichiさんにa-blog cmsをステッカーをいただきました。ありがとうございます。
このステッカーは、貼っても剥がせるそうで、再利用が可能です。

3月7日（土）に行われた、WCAN mini Design Vol.8に行ってきました。
今回はAdobe Photoshop CS4とFireWorks CS4の新機能の説明ということで、
アドビの西村真里子さんが講演に来られました。



Photooshopに関しては、元々完成度が高いアプリケーションだけに、
ズームアップが限界まで寄れるようになったとか、
パネルの種類が増えたとか細かな機能アップだなといった印象です。
FireWorksは、Adobe製品となって、Webグラフィックソフトとしての、
立ち位置を明確にする機能が増えたようです。
Illustrator、Photoshopで制作したデータをきっちりWebに繋ぐ役割だということです。
Adobe標準ワークスペースエンジン搭載ということで、親和性も向上したそうです。

特にFireWorksからのPDF書き出しは実用性が非常に高いように感じました。
来年度、Webデザイン学科では、CS3を使用する予定ですが、
アプリケーションの機能に依存しない“基礎力”を付けていきたいですね。