Gutenberg、だいぶ使いやすくなったので移行中です

未経験からWEBデザイナーになった時、やったこと

WEB
スポンサーリンク

あけましておめでとうございます。
なんだかずいぶん久しぶりになってしまいました。

年末年始に何をしていたかと言いますと…

 

初売りでSwitch LITEを買った以外はほぼぼーっとしてました。

 

twitterで意識の高い方々が投稿する「積み重ね」をふるえながら見ているという体たらく。

まあそんな年もあります。
これから頑張ります。

 

そんな「積み重ね」TLを見ていて、「自分にとって未経験からWEBデザイナーになった時に一番勉強になったことは何だろう」と考えました。

手打ちでHTMLが書けても、Illustratorの使い方が解っていても(詳しくはこちらの記事で)未経験は未経験…覚えなければならないことは沢山ありました。
数年前を思い出しながら書いてみます。

 

※デザイナーとして働いているのは会社でわたしひとり、という環境です。
チームで働く場合はまたちょっと違うと思います。こんなケースもあるんだよ、ということで。

 

未経験からWEBデザイナーになった時、やったこと

静的なサイトをWordPressでテーマから作り直した

たしか会社に入って一番最初にやったことはこれです。
前任のWEBデザイナーが退職してから間があいていたので、サイトが休眠状態になっていたのです。
検索結果もそんなに上ではなかったので、どういう方向で行こうかちょっと悩みました。

そこで、先の事も考えて、HTMLとCSSで書かれたサイトをWordPress化し、更新用のコンテンツをつけることにしました。

WordPressってなんぞ?というところからのスタートで、しかもテーマもイチからオリジナルで作ったので、公開まで1カ月くらいかかった気もします。
しかしテーマを作る→サーバに設置する→サイトを公開する、という一連の流れを通して、サーバやドメイン、データベースの仕組みも理解できるようになりました。

 

私は「Webクリエイターボックス」さんの「WordPress オリジナルテーマ作成 完璧ガイド」という記事を参考にして作りました。
2010年の記事なので、今のWordPressとは違っているかもしれません。

「WordPress オリジナルテーマ 作り方」などで検索すると新しい記事も沢山出てきます。
とても勉強になるのでぜひチャレンジしてみてください…!

 

テーマが出来て公開した後に、「継続して記事を書く方が大変」ということに気付くのですが、これはまた別のお話……

 

「Google」が提供しているWEBサイト運営に役立つサービスをチェックし、使い方を勉強

WEBサイトと切っても切れない、無視することなどできない「Google」。
Googleが提供しているツールは、サイトを運営するなら絶対に必要といっても過言ではないかもしれない。
ビジネス用のサイトを運営するなら、最低でも以下のツールの使い方は覚えておいた方がいいかなと思います。
ほぼ無料ですし。

 

サービス利用のために、まずはビジネス用のGoogleのアカウントを作りましょう。
Googleアカウント

アナリティクス

Google Analytics

超定番、サイトのアクセス解析ツールです。
用語などわかりにくいもののありますが、使用している人が多いので検索すればすぐに使い方が解ります。

 

サーチコンソール

Google Search Console

旧名はウェブマスターツール。
検索に関するレポート、サイトの構造やインデックスをチェックすることができます。
検索キーワードは大昔はアナリティクスで見れたように思うのですが、今はこちらですね。

 

Google マイビジネス

Google マイビジネス

こちらに登録することでGoogleマップと連携し、ビジネス情報を掲載することができるようになります。
Googleはローカライズに力を入れているので、店舗やオフィスが実在する場合には重要なツールです。

 

PageSpeed Insights

PageSpeed Insights

WEBページの表示速度の計測ツールです。
最近は「ページが表示される速さ」もサイトの評価の重要なファクターなのです。
こちらはアカウントなしでも使用する事ができます。

 

Google 広告

Google 広告

旧名はGoogle AdWords‎。
WEB上に広告(「検索連動型広告(いわゆる検索広告。検索結果の画面上下に表示されるもの)」「コンテンツ連動型広告(いわゆるディスプレイ広告。WEBサイトの広告欄に表示されるもの)」)を出す時に使用します。
1クリックいくら、という仕組みなので低い予算でも始められます。とはいうもののやはりそれなりに予算をかけないと効果が出にくいかも。

「AdWords‎の頃より設定が簡単になりました!」と謳っているけどまだとっつきにくいと思います…。キャンペーン?グループ?オーディエンス?入札戦略???よくわからん!って今も思います。

一定額以上広告を出すとGoogle広告の担当者が付いてくれるようです。

 

既存のサイトとそのコードを片っ端から見る

デザインのネタはあればある程いいです。
「WEBデザイン トレンド」などで検索すると優れたデザインのサイトを集めた記事が沢山出てきます。
そしていいなと思ったサイトがあればデベロッパーツールなどでソース(サイトのコードの書き方)や配色を調べてます。
これは今でもやっていますね。

デベロッパーツールはchromeでは「F12」を押すか右上のツールから出す事ができます。

デベロッパーツール

他のブラウザにも同じような機能はありますがChromeのが一番使いやすいと個人的には思います。

 

いまはCodePen(HTML、CSS、およびJavaScriptコードスニペットをテストおよび展示するためのオンラインコミュニティ)など開発者向けのいいツールが沢山ありますよね。
流し見するだけでもいいと思います。「あんなのあったな!」という記憶に助けられた事が何度もある。

 

既存のデザインをAdobe Illustratorでトレースする

わたしがデザイナーとして入社したとき、前任者と引継ぎができなかったので、「印刷した物はあるけど印刷用データがない」「jpg画像はあるけどAIデータがない」といったことがしょっちゅうありました。

消費税が変わったり、日付が変わったり、担当者が変わったり…けっこう修正ってあるのですよね。

なので、Adobe Illustratorを使っての「既存のデザインの再現&部分的な修正」または「既存のものより良いものへのリデザイン」はよくやりました。

もちろん社内で作成したもの(著作権が会社にあるもの)に関してだけですが、これは非常に勉強になりました。

 

Adobe Illustratorは道具です。
センスよりまず「使い方を覚える」、これが本当に大事だと思います。
道具を思うように使えないって、かなりのストレスになりますからね…。

 

未経験からWEBデザイナーになった時、やったこと まとめ

未経験からいきなり現場だったので、「必要とされるものを学びながら作る」というやり方で1年ほど過ごしましたね。
とりあえず「見る」、そしてちょっとでも疑問に思ったことは「調べる」。そして「やってみる」、です。
トライアンドエラー、その繰り返し。
解決方法はだいたいネットで見つかります。解決方法を残して下さった方にはほんとうに感謝です。

 

わたしはもう中年ですが、まだまだ駆け出しでいまも勉強中ですし、これからもずっと勉強して行くと思います。
WEBデザインって技術もそうですが流行り廃りもサイクルが早いのであっと言う間に置いていかれるんですよね。

 

この程度のスキルでも必要としてくれる会社があるよ、という一例です。
未経験からでもWEBデザイナーを目指せると知って頂けると嬉しいです。

コメント

タイトルとURLをコピーしました