前期業界研究の最後はフリーでイラストレーターをされている柴乃櫂人さんにお越し頂きました。これまでは講演のあとに質疑応答というかたちで進行でしたが、今回は柴之さんがライブペイントをされている合間に生徒が質問を投げかけるというちょっと変わった進行でした。

作品が出来上がって行く過程を見ることができるというのは非常に良い機会となりました。作品へのこだわりをリアルタイムで追って行けるのでプロとしての仕事の姿勢を学ぶ事もできるし、着色をかさねキャラクターに段々と質感が出てくるその様子がとても面白く、改めてもの作りの面白さを教えてくれました。

イラストとWebでは作るものさえ違えど、作品のクオリティを求める点ではまったく変わりはない。それがはっきりと感じ取れる時間でした。

柴之さんのお話のなかで一つ気になったのが、これからのイラストレーターはイラストを描いているだけでは業界で生きて行くのが困難であり、そのためには漫画が描けるようにならないと行けないという事です。漫画となるとストーリーが重要であり、イラストレーターにはその為の力が必要となってきます。常に新しい能力が求められているのはどの分野でも変わりないという事です。

Webも常に技術と表現の幅が広がっている分野です。Flash、PHP、最近ではHTML5が出てきた事によりjavascriptが盛んですが、これらのプログラミング言語の学習のほかにも、IAやUXといったユーザー視点での設計能力も必要とされています。

現在の自分に出来る事は数少なくこれからの時代を見据えて必要とされているものを見極めなくてはいけません。デザイナーだからプログラムは知らなくてもいい、プログラマーだからデザインは知らなくてもいい。そんな時代はとうに終わってる。でもがむしゃらに手を出したって失敗するのはもう十分に分かってるつもり。

なにか一つ、これだというものを自分中で見つけたい。

Twitterを見ていて気になるツイートを見かけた場合、☆をポチってお気に入りに入れている方も多いと思います。自分もちょいちょい☆をポチっているのですが、後で見返そうと思っていても忘れていたり、数が多くなって管理できなくなってしまったりという状況になっている為、ここで一度見直して整理しておこうかと思います。

色々な種類のツイートをお気に入りに入れているため、以下のようにカテゴリー分けして整理することにしました。

■Tips系
便利なjQeryやHTML/CSSのテクニック関連をまとめています。

■Webサービス・Webサイト
便利なWebサービスや注目しておきたいWebサイト、また読んでおきたい記事などまとめています。

■名ツイート集
個人的に心に残ったツイートをまとめています。

■ネタ的ツイート集
面白かったツイートをまとめています。

これらの内容はTwitterに有益な情報をアウトプットして頂いている方々から得た物なので、最初はその方達のユーザー名も一緒に記載した方が良いのではと考えましたが、許可無く勝手に他人のユーザー名を晒すのもどうかと思ったので記載しないことにしました。

いつも情報を提供して頂いてる方々にお礼申し上げます。

「Twitterのお気に入りを整理してみる」の続きを読む

7/6にWEBデザイナーである細川太郎さんにお越し頂きました。個人では軍艦島と言うサイトを持っており、現在のものがバージョン3。軍艦島の知名度や存在が多くのひとに知られるようになって来たためこれ以上のリニューアルをする予定はないそうです。

話の内容としては仕事をしていく上でクライアントとどう関わっていくかなど。多くの方が言うとおりとにかく密に話しあって相手の意図理解すること。そのためには仕事の内容だけではなく、話の幅を広げてクライアントについて知ることが重要だそうです。

コミュニケーション能力や国語力も必要なのでそのあたりをこれからどう鍛えていくか、学生としては重要なポイントですね。

今年も前年と同じように業界研究の授業があります。そして今年最初の講演者はフリーで活動されているWebデザイナーの戸田芳裕さんです。戸田さんはFlashサイトの制作を得意としている方で作品はどれも面白いアイデアと工夫が詰まっています。戸田さんの作品はunoplusで見ることが出来ますので是非どうぞ。こちらのサイトも遊び心が効いてます。

個人的に印象に残ったお話は、

• クライアントワークだけでなくプライベートワークを
• 遊び心を大切に
• 概念を打ち崩す
• 個性を見つける

の4つ。クライアンワークは決して面白いものばかりではないので、プライベートワークをすることで自分のモチベーションを上げる。サイトには情報だけでなく、ユーザーを楽しませる要素を。当然と思われていることほど疑ってみる、等々。

戸田さんご本人もとてもユーモアな作品には戸田さんの人間性が感じられました。面白いものを作るには自身がユーモアであり続ける必要性を感じました。

名古屋駅に以前からある「WEDGE」という雑誌のポスター。雑誌は主にビジネスや経済、国が抱える問題などを記載しているそうです。WEDGEは日本語でくさびの意味。

見かけるたびにこのロゴのカーニングが気になってしょうがない。どんな意味があるんでしょうか？

マークアップの授業でプルダウンのグローバルナビゲーションの実装をしていたとき、改めて子セレクタと隣接セレクタって便利だなと思ったのでここでおさらい。

今年度からマークアップの授業ではIE6がターゲットブラウザから外れました。これはIE6への対応に時間をかけるよりも、新しい技術の習得に時間をかけようという学校側の判断によるもの。子セレクタや隣接セレクタは別段新しい技術ではないですが、IE7からサポートされている為、IE6がターゲットから外れた今積極的に使っていかないともったいない。昨年の授業では影が薄かったというかまったく出てこなかったような。

子セレクタ

親要素に含まれる直接の子要素のみにスタイルをあてることが出来る。例えばプルダウンのグローバルナビゲーション（横並び）を作るときHTMLは・・・

「子セレクタ、隣接セレクタ」の続きを読む

名古屋駅から十分ほど歩いたところにかっぱ商店街というところがあります。そこに仙石すしというお寿司屋さんがあるのですが、この仙石すしさんをクライアントとし、サイトを制作するというグループワークを行っています。

今までにはない実践的な内容なだけに、個人でサイトを制作するとはまた違った難したがあります。グループで作業を行うということ、クライアントの求めていることをしっかりと理解すること、協調性と相手の立場となって考えることが重要になってきます。

「商店街プロジェクト」の続きを読む

かちびと.net

のシロさんがWordpressで構築されたサイトを多数載せた、WPデザインギャラリーを公開されました。最近HTMLとCSSで作られた国内サイトを集めたギャラリーサイトを探していた所だったので、これは嬉しい限りです。

Wordpressで構築されたサイトに限られますが、数も多くデザインの良いサイトが集められていますので参考になります。

今は自分専用のギャラリーサイトを作っています。きっかけは以前Twitterでちょっと話題になった「俺専ブックマーク」の存在。ブックマークは自体ははてブで間に合ってるのですが、やはりサムネイル付きでずらりと並べたい。で、だんだんと数を増やしコンテンツを充実させて一人でニヤニヤしたいとです。

せっかくだから勉強も兼ねてHTML5とCSS3で作ろうと思ってます。前回のcss nite LP９の課題（提出はしてないけど・・・）をやっていたとき本当に面白かった。とくにCSS3を使って表現出来る幅は広がったんじゃないでしょうか。ただブラウザの実装状況が十分ではないのが残念。CSS3自体も草案段階でこれから色々と変わるでしょうし。早く実践レベルで使えるようにならないかなと願うばかり。

ただ今回作ろうとしているのは自分専用コンテンツなので、一番CSS3の実装状況の良いwekit系ブラウザにしぼって作ってみようかと思っています。が、いざ作ろうとするとCSS3の良さを生かすというか、別にいままで通りのCSSで十分というようなデザインしか出来ない。そう思うとLP９の課題は良く出来てたなと、素人のくせして上から目線の感想ですいません。

いろいろ試しながら、夢の自分専用ブックマークを目指して頑張ります。

アップされたというかアップ出来たというか。ホントに時間がかかってしまいました。

HitosashiYubi

今回もCMSはa-blogcmsを使わせていただきました。ちょびっとだけ上達したかな？

問題は各ブラウザでの表示。IEでは多少のズレはあるものの、レイアウト自体は崩れていないようで。

ホット一安心していたら、アップ後に発見してしまいました。

「友達のブログがアップされました」の続きを読む

現在wordpressでブログ（またブログですよ・・・）を作っていますが、学科の皆もwordpressでブログを作ろうとする動きが出てきたので、自分がやってる作り方や参考にしているサイトを書いとこうと思います。

といっても多くのサイトで紹介されているとおりで、基本的には既存のテンプレートをいじるのが一番早いかと思います。自分がいじっているのは最初から用意 されているdefaultのテンプレートと、vicunaです。vicunaは参考になるので、ダウンロードしてテーマに加えま しょう。

■最初の頑張りどころ

まずはwordpress.日本語を見て、wordpressがどういった仕組みで出来ているのかを知りましょう。でもここで全てを理解する必要はありません。なんとなくでいいんです。

「なんかheader.phpとかfooter.phpに分けるらしい」

「＜?ｐhp ~ ?＞みたいな書式をHTMLに埋め込んで作るんだって。よく分かんないけど。」

って程度で大丈夫です。でも必ず一度は目を通しておきましょう。

後で実際に既存のテンプレートと照らし合わせながら見たり、いじったりすることで自然と理解が出来てくると思います。

■次の頑張りどころ

defaultなどのテーマの中に入っているindex.phpなどを開くと、テンプレートタグが沢山出てきてうんざりするかも知れませんが、ここは踏ん張りどこです。

配布されているテーマの中身はとても複雑に見えますが、これはウィジェットに対応するためや、管理画面でブログタイトルなどを変更した際に、その変更をブログに適用させるための記述が多くなっているだけです。

自身が使う為のオリジナルテーマにはこれらの機能はほとんど必要ないかと思います。そのためいざオリジナルテーマを作ってみると、配布されているテーマに比べ、index.phpなどの記述はかなりシンプルになります。

なのでここで無理だと諦めず、とにかく既存のテンプレートのテンプレートタグを適当に消しては付けてを繰り返し、その度にどう変化しているのか確認する、これを繰り返しましょう。個人的にですがCMSの導入ってコツを掴むかどうかだと思います。複雑な構造になるとその先の知識が必要になりますが、オーソドックスなブログであれば、一度コツを掴むとそれらしい形のものは出来ると思います。

■その次の頑張りどころ

既存のテンプレートをいじり倒してなんとなくでもコツが掴めたら、次は自分のオリジナルテーマのHTMLにテンプレートタグを埋め込んでいきましょう。その際のポイントを紹介します。

まず最初に作るオリジナルテーマはシンプルなものにしておいた方が無難だと思います。シンプルっていうのはブログ全体のデザインの話ではなく、レイアウトや構造の話です。基本的な2カラムレイアウトで、サイドバーにはエントリーやらアーカイブのまとめがあり、残るもう一方のカラムには記事本文が表示されるような、ようするにごく一般的なブログの構造です。

理由はdefaultのテーマやvicunaのテーマが、この構造で出来ているからです。オリジナルテーマの構造をこれらと同じにしておくと、必要なテンプレートタグやそれを埋め込む箇所など、defaultやvicunaを見ればすぐに分かります。

例えばオリジナルテーマのサイドバーに用意したアーカイブ一覧の項目を動的にしたいと思ったら、defaultやvicunaのアーカイブ一覧の項目からテンプレートタグをコピペしてやればすぐに出来ます。同じように記事タイトルや記事本文に必要となるテンプレートタグをdefaultやvicunaからコピペしてくればOKです。

こうやって少しづつでも作業を進めていくうちに自然と理解ができてきます。また、PAOLOGさんのサイトにwordpressで簡単なブログを作る方法が書いてあり、大変参考になります。すごく解りやすいので参考にしてみて下さい。

自分もまだ製作途中ですが、上に書いたようなやり方を繰り返し、色々なサイトを参考にしてほぼ出来上がってきました。CMSがちょっとでも使えるとサイト制作が楽しくなりますよ。