無責任企画No.0032としていた企画を実行していきます。フォトショップやイラストレーターを使った仕事を長年していたため、新しい仕事を探している今、腕が鈍らないように自らに課題を課して何かを作っていく、そんなコーナーにしたいと思います。
手始めにこのコーナー自体のロゴをざっくりと制作しました。普段、どうにも角ばった直線的なロゴを作ってしまうことが多いので、真逆に位置する丸っこいものを、という感じで深い意味はないです。こうした作業のときには参考として
といったサイトを眺めて色や形などの方向性を決めてます。といっても、今回作ったものはイラストレーターで円・楕円を組みあわせるだけのお仕事でありがちな感じ。まあこれだけでも考えて作るのは楽しいものなので、時間があればまた簡単ロゴを作ってみたいと思います。
さて、これはジャブとして、大きな課題をたてます。Webデザインです。Webはいろいろな技術が絡むうえに、流行り廃り、移り変わりが早いので油断していると置いて行かれてしまうのです。
どんなWebサイトを作る？
作るのは『採用サイト』にしようと思います。自己批判ショーを会社に見立てた採用サイト。いろんな企業が新卒採用向けのサイトを作っているわけですが、コーポレイトサイトと比べて、ダイナミックなデザインがされていたり新しい技術が盛り込まれていたりするので真似していくだけでもかなり勉強になりそうです。
ざっと考えても
- 採用サイトトップページ
- 社長（代表）メッセージ
- 会社（劇団）紹介
- 社員（団員）紹介
- 募集要領
みたいなページが必要になってきますね。さらに、
- 会社（劇団）の歩み
- インタビュー
- 座談会
- 採用の流れ
- よくある質問
などなどそれっぽいページはたくさん考えられます。トップページが決まればあとはすんなり展開できるかもしれません。まあ参考とするサイトを決めて、ある程度真似てしまおうと思います。色とかのトーンもとりあえず借りてしまおうかな、と。
そして代表や、メンバーがろくろを回す写真が必要となりますね。
ワイヤーフレーム
上記のようなページ構成を決めてからワイヤーフレーム、ホームページの仮組みたいなものを作っていきます。この段階では見た目のデザインは行わず、情報の整理を優先。
今回はAdobe XDのベータ版を試しながら進めていこうと思います。今はスマホからアクセスする人の方が多いので、モバイルファーストの考え方でスマホ向けデザインから決めて展開予定。モバイルファーストじゃなくてユーザーファースト、と呼ばれる方もいるようですね。
勉強する技術
ワイヤーフレーム作成後、実際のホームページとして組み立てるときに取り入れてみたい技術もいろいろあります。
- ＳＶＧアニメーション
- パララックス効果
- メガメニュー
- 動画の活用
- ななめの区切り線
- 雑誌風レイアウト
などなど・・・。最新の技術というか、試していないもの、という感じですね。ひとつめのＳＶＧアニメーションは以前作った細字のロゴでテスト作成したものをお見せしましょう。
http://zico-hihan.sub.jp/ar40/zico_index.html
（クリックすると別ウィンドウで開きます）
これは線画を簡単にアニメーションさせてくれるスクリプトを使っているのでとりあえず動きます。（このロゴはこれを試すことも考えて作ったのです。）ちゃんと設定すれば再生のスピードやら書き順などもいじっていけるはず。使いどころはローディングアニメーションがベタか。
他にもＣＳＳ周りでＳＡＳＳを試してみようとか、ＦＬＯＣＳＳ⇒ＦＬＯＵの考え方にしてみようとかあるのですが、この辺にしときます。
次回はワイヤーフレームを実際に作っていくところ、をお送りする予定です。
