画面収録PC昨年オンラインスクールでWebデザインを学んでいたのですが、スクールのコース卒業制作で制作した、自分のストックイラストのLPページを公開したのでご紹介いたします。
Contents
「なめきみほのストックイラストでデザイン時短のススメ」
制作の目的
[jin_icon_check_circle color=”#e9546b” size=”18px”]イラストレーターなめきみほを知ってもらう
[jin_icon_check_circle color=”#e9546b” size=”18px”]ストックイラストを制作していることも知ってもらう
[jin_icon_check_circle color=”#e9546b” size=”18px”]新規イラスト制作のご依頼・お問い合わせをいただく
イラストレーターとして自分のウェブサイトを持ちたいなぁと思っていたのですが、いきなり下層ページまで作り込むのはハードルが高かったので、まずはLPページを、ということで、当時頑張っていたストックイラストのLPページを制作することにしました。
意識したこと
心がけたのは、とにかく全ての素材を自分で作る！ということ。
イラストレーターたるもの、ここは譲れない…と。
実際コーディングしていた時間とイラスト制作していた時間、どっちが長いかというとイラストの方が長いかもしれません…
一番のお気に入りは制作の流れを説明したイラストです。
苦戦したところ
↓こちらのコンテンツの見せ方。
PC画面で画像とテキストが交互に表示され、リズム感のある見た目にしたかったのですが、タブレット・スマ説明文ホ表示時にこのままレスポンシブにしようとすると、２つ目のブロックだけ題字→説明文→画像になってしまうんですね。
そこをCSSを駆使して題字→画像→説明文という順番になるように。
スクールではそこまで教えてくれないので、ほとんどググりながら作りました。
制作を終えて
このWebデザインがバズった
コーディングが終了したタイミングで完成デザインをツイートしたら、なんとバズりました。人生初バズです。
↓バズったツイートがこちら。
Webデザイン卒制が完成しました！
これはPC画面だけどレスポンシブ対応です🙆♀️頑張ったから見て欲しい…！素材は全て自分で描いてます。
ご依頼についての挿絵がお気に入り。
Webデザインも楽しいけど、やっぱり絵を描くのが好き。と思った☺️笑WPの自サイトに組み込んで随時更新するのが目標です💪 pic.twitter.com/xhs5VTF55n
— なめきみほ✏︎ イラストレーター (@namekimiho) January 10, 2020
こんなにも多くの方に作品をみて頂けたのは初めてで、びっくりしました…
色んな嬉しいご感想も頂けて、感無量でした。
勉強や制作したことを踏まえて、アウトプットすることもすごく大切だなと思います。
スクールで「今月の優秀賞」を受賞
1月某日にスクールの拠点でWebデザインコース制作発表会がありました。
当日は緊張しながらも制作の経緯やデザインのポイントなどをお話しさせていただきました。イラストレーターとして、自分のイラスト作品を用いて制作している、ということでインパクトはあったと思いますが、なんとその日の発表者の中では優秀賞を頂くことができました。
賞を頂けたことはもちろん嬉しかったのですが、なによりも、私のデザインがパッとモニターに表示された瞬間の「可愛い…！」という驚きの声が上がったことがとて嬉しく、印象に残っています。
本当に大変なのはここからだった
ワードプレスに落とし込む作業
ワードプレス初心者なので、ここが辛かったです…
ここでもまたググりにググってw、メンターさんやウェブデザイナーさんにも聞きながら、なんとかホームページに紐付けて公開までたどり着けました。
ちなみに、テンプレートを使わずに固定ページに組み込んで作っています。
これからの運営
そして、ウェブサイトって作って終わりじゃないんですよね。当たり前ですが。
ここからコンテンツを充実させつつ、LPページも随時最新の情報を載せるなどして、新鮮さを損なわないようなサイトを目指していきたいです。
本業はイラストレーターですが、Webデザインの勉強も続けていければ良いなぁと思います。