Welcome to my blog

Although the world is full of suffering,
it is full of the overcoming of it.
- Helen Keller

05

やっとサイトができました!【ちょっと苦手を克服した話について】※追記あり

遂に新元号、令和の時代となりました。今月からもう平成じゃないなんてまだ実感わきませんね。

今年はゴールデンウィークが10連休だった人も多いかと思いますが、私は先月28日から今日までの8連休でした。そしてこの連休中、長らく放置していたYukiyanagiの特設サイトを完成させました。
いえいえ、コーディングに1週間もかかってたわけではありません。素材制作(お絵描き)に5日間、コーディングに3日間かかりました。

2月の記事にも書きました通り、現状のYukiyanagiサイトは単に私の作品と好きな物を載せただけのもので、「これが伝えたい!」というのが定まっていませんでした。昨年2018年から博物ふぇすなどのイベントで出展するようになり、一人でも多くの人に作品世界について知って欲しいと思ったものの、これまでのサイトではうまく伝わらないのではと考えたためです。

転職のこともあり、もう一度HTMLやCSSについてはちゃんと勉強し直したり、コピペでしか実装できないJavaScriptやjQueryについても基礎から勉強するつもりではいます。けれどやりかけたことはとりあえず先にやってしまいたいし、サイトを自分で作ることで忘れていたWEBスキルを思い出しておきたかったのです。

そしてこの度、完成しましたサイトがこちらとなっています。→http://yukiyanagi.oops.jp/

Yukiyanagi Mockup Pack-2019new
モバイルフレンドリーテスト 合格 2019年5月20日最終更新

ページ数も少ないし、未完成の絵もあるのに5日間も何そんなに絵に時間かかってたのって話ですね。それはですね、キャラ紹介のページにですね、7名のキャラクターの全身図と表情図があるじゃないですか。あれに時間がかかってしまったんですよ。
実はお恥ずかしい話、私はキャラに個性をつけてそれらしい表情させるのが苦手なんです。致命的ですよね。

私の創作の原点は、そもそも個性豊かなキャラをそれらしく描くことではなく、自分がカッコいい、素敵って思った対象を自分が納得いく形で表現することでした。だから素人の絵や創作にあるある、「登場人物がどれも似てくる」現象がよく起きていました。
それがあまりに素人臭いと思ったし、この年になると人間にも興味を持つようになるので、7名いるなら7名分の個性を表現しようとしました。するとそれまで殆ど練習してこなかった個性だの表情の表現だのの壁にぶち当たったのです。
また私はえらい恥ずかしがり屋でもあるので、絵を通してオリキャラの意外な一面を見た時キャラ崩れしてないかすごくビビるし、意外にそれらしく描けちゃうと感動してしばらく見つめてたりしてました。

例えば代表的なのがこの3名です。
3-yuli.jpg
ヤマネコ族のユリィ。彼女のことは小説を通してよく笑いよく喋るキャラ、という設定です。でもまさか本当にそれらしくさらっと描けちゃうなんて思いませんでした。ガチで笑ってる顔の隣に泣いてる顔描くのちょっと勇気要ったんですが徒労でしたね。表情の豊かな女性というポジティブなイメージに仕上がりました。

1-jeral.jpg
アルゴメア王国の探検家、ジェラールです。彼についてはこの絵を描くまで単なる物語世界の案内役、という認識しかしていなかったので、すごく気乗りしなかったんですよ。宣教師でもあるから心は広い人だろう、冒険心のある人だろうというぼんやりとしたイメージで描いてみたら、意外にも優しげではつらつとした人物になりました。冷や汗を描いてる絵があるのは、作中何度もドキッとするシーンに出くわしているからです。

5-dagal.jpg
ワシ族のダガール。彼についても当初単なるワシ族代表っていう感覚しかありませんでした。でもこうやって描く以上、何かキャラ付けしないとなと思ったとき、以前軽い気持ちで描いたときにいい感じの笑顔だったことを思い出し、「仲間思いで面倒見のいい兄貴」というキャラができました。また去年描いたポストカード用のイラストでは眼光鋭く槍を投げるポーズを描いたので、敵対する者には容赦しない、という設定も入れてみました。

1日で2名描くのが限界で、このネタ以外にも別の創作ネタがほいほい浮かんできてしまい、それも気分転換として描いてたので時間がかかった次第です。


サイトのコーディングについても、今回いろいろ自分なりに新しいスキルに挑戦したり、覚えたりすることもできました。
jQueryはプラグインを実装しているだけだし、JavaScriptはほぼコピペですが、今の自分でも理解しやすい、シンプルで使い勝手の良さそうなものを見つけることができ、納得する形でカスタマイズできました。
CSSも最近floatよりも便利で使い勝手が良いと言われるFlexboxを導入し、floatとFlexboxを程よく使い分けています。
一部文字をマウスオーバーするとブルブル震える箇所があります。あれは不似合いに面白いことをしてみたいというふざけた動機と、CSSの実装パターンの学習のためという真面目な理由があります。

あとはWEBデザインやってる方なら「え?今更(笑)」と鼻で笑いたくなる話かもしれませんが、HTMLタグにつけるclass名って、半角スペースを使えば複数設定できちゃうってこともわかりました。
だって職業訓練でそんな話聞かなかったもん。まあ疑似要素とか、Flexboxとかも訓練後に独学で知ったんだけどさ。class名って絶対一つしか付けられないと思い込んでたもの。でも、よそ様のHTMLやCSSをコピペするとき、明らかにclass名複数ないとできないのではと思うものがあったものの、真似しようとして上手くいかなかった気がしてた……。それが今回何の加減かやり方がわかったんで良かったです。これまでは、ある程度まで構造は同じなのにちょっと見た目が違うってだけで全部一から書いてました。効率悪くて冴えないなあと思いながらも、わからなかったんでやるしかなかったんです。これで一つ賢くなれました。今後はもっとスマートなCSSが書けそうです。


というところです。これで少しはWEBスキル復活したので、あとはもう一度基礎を学び直して、よそ様のサイトの模写をしつつ、転職活動していこうと思います。
また私がこれまで仕事や家族の依頼で作ってきたWEBサイトたちも、ダサいことやってる箇所が多いと思うので直していく予定です。


【2019年5月21日 追記】
URLが変わっていないので、つまり中身を全て置き換えたということになります。これまで文媒体で紹介していた独自の世界観設定、メイン創作以外のイラストや小説、そして私の大好きなオオカミについて熱弁したページなどがすべて消えています。だからこのブログに貼り付けている私のサイトのURLがもう存在しない、ということも多分にあります。
(※フリー素材のデータはちゃんとダウンロードできますのでご安心ください)
でも、別にいいです。まあ転職用に古い作品の例として「/old/」という階層をつけ、そこに過去のWEBのデータを丸ごと投入することも考えていますが、一般向けに見せることは想定していません。
独自の世界観設定については昨年作った漫画のパンフレットをPDFにして見られるようにしています。長々と文章で説明していた内容を自分でも驚くぐらい端的に漫画にしてまとめられました。
学生時代から私が心血注いでまとめてきたオオカミの真実については、このブログのどこかのページに差し込むか、或いは新しいサイトに「エッセイ」という形で紹介しようかと考えています。
……あ、そうだ。オオカミのこともそうだけど、物語や世界観設定のモデルになった事項について紹介するページを作ろう!「オオカミについて」とか「人類の種の多様性」とか「意外に知らない北米開拓史」とか。どれも結構知識が2年以上更新してないんだけど、WEBページを追加することを機に更新しようかしらん♪