Cntlog > スキルアップ・ノウハウ

Webデザイナーのスキルアップする上で気をつけていること

かれこれ、もう10年以上IT業界にいますが、日々使うスキルが変わってきて追うのが大変です。

それに加えて、Webデザイナに求められることもどんどん増えてきてるなと感じています。

デザイナーとしてのスキルチェンジの必要性を感じる

昔はWebデザイナーといえば、Webサイトのデザインをしているだけで良いみたいな雰囲気でしたが最近はCSSがかけて当たり前、JSも書けるし、WordPressも一人でテーマを作れるのが普通なんて言われる時代になっていました。

最近はそれに加えて、UIデザイン、UXデザイン、解析、マーケティング、SEO、ライティング、経営思考など結果に繋がるものを求められるようになっています。

正直全部をできる必要はないのですが、それぞれの専門職種が本来はあるのにそれをWebデザイナが求められるというのは変と思われるのかもしれませんが、個人的には他の専門職に「Webデザイナのスキル」が求められるというのが、納得しやすい感覚です。

デザイン以外の重要性が高まってきているので、デザイナーに求めれる役割がどんどん広がり、変化してきていると感じています。

今のままのスキルを伸ばすというより、デザイン以外の新しい専門性を身につけることでWebデザイナとして期待されるスキルに繋がるんじゃないかなと思っています。

Webデザイナーとして基礎力をつけるために

「近接(グループ化)」「整列」「反復」「コントラスト(強弱)」といった手法を使ったりして情報整理するのが美しく見やすいデザインになる基本です。

レイアウトにもWebのトレンドがあったりしますので、そのあたりは既存のWebサイトやギャラリーサイトを見て参考にするのが良いかと思います。

最近だとDailyUIなんてものが流行っていて、毎日自分で考えたUIを投稿する人がいます。

Twitterの投稿

こういった継続は本当に基礎力が付くので良いですね。

今の自分とこれからの自分に必要なスキルを考える

何かを学ぶということは、同時に何かを学ばないということでもあります。

なんでも学ぶには時間が足りませんので、ゴールや方向を決めると必要なスキルが見えてきます。

例えば、事業会社と制作会社どちらで働くかによっても、スキルアップ戦略は変わってきます

両方で求められるスキルを同時に追求することは、人に認められる機会が均等ではなく、なかなか難しいです。

制作会社で必要なスキル

制作会社の場合、プロフェッショナルを求められる事が多いです。

デザイナで言えば、表現の幅が期待値として高めになります。

他の人が人にできない事をしたり、パートナーとしてクライアントさんと一緒に作っていくのでその業界での売り方などのノウハウなんかが求められます。

下記のスライドは制作会社でのスキルアップの事が書かれているので参考になります。

制作会社の視点で見る デザイナーのキャリアパスとスキル

事業会社で必要なスキル

事業会社の場合、表現力がどうといった話ではなく、ビジネス的なコミットを求められる事が多いです。

例えば、コンバージョンが低い原因を調査して改善りたり、直接ユーザーにヒアリングをして改善をしたり継続的な改善の力が求められます。

(あと意外に社内調整というか、人を説得する力が求められたりします。)

下記のスライドは事業会社での働き方が見えるので、必要なスキルが見えてくるかと思います。

インハウスデザイナーの領域 〜課題発見から解決まで〜

得意なスキルを決めて、割り振る

冒頭でも書きましたがデザイナーといっても、色々な種類があります。

ぱっと思いつくだけでも、

  • グラフィックデザイナー
  • Webデザイナー
  • UIデザイナー
  • UXデザイナー
  • モーションデザイナ

それぞれ必要なスキルに違いはありますが、根本にあるのは、「情報を人に伝える」ことです。

得意とするやり方が、異なるだけで解決しようとしてることは似ています

スキルのパラメーターの振り方を考える

Webデザイナであれば、色々なスキルのフリ方があります。
最近を増えてるのがフロントエンド系のスキル(CSS/JS)やUX周りが多いですね。

デザイナの原点に戻って、グラフィックデザインに注力される方もいます。
細かいビジュアルの作り込みや感情に訴えかける表現が得意な方はこちらのほうが受けが良いですね。

そのセンスを活用して動画を扱えるようになるのも良いでしょう。

「何をデザインするか」によって、必要なスキルの幅も深さも変わってきますのでみんなと同じキャリアを考えるのではなく、あなたは何がしたいのかを見極めて必要なスキルを考える必要があります。

デザイナーのスキルに関して、様々な「あるべき論」がありますが、あれはその人の環境で必要なスキルセットで発言されてる、無視はしなくてもいいですが無理に自分が劣ってるみたいに考えなくても良いです。

スキルアップ戦略を決めるための指針

フリーランスでも会社員でもデザイナとして働く以上、市場で生き残っていく必要があります。(お賃金も大事ですので)

スキルアップ戦略を考えると以下のような基準で選ぶと必要なスキルが見えてきます。

  • 自分の好き嫌いでスキルを身につける
  • 会社から求められているスキルを身につける
  • 転職市場における需要でスキルを身につける

一度紙に書き出してみて、自分が足りてるスキル、今後伸ばしたいスキル、自分の方向性などを見直してみてはいかがでしょう。

伸ばしていくスキルを決める

大きくデザインスキル/コーディングスキル/マーケティングスキル/みたいに分けて考えると楽かなと思います。

そこで、まずはどの能力を伸ばしたいのか決めるとやりやすいかなと思います。

すでに「こうなりたい!」と決まってる人は、それを満たすスキルを選定すれば良いですが、現状から伸ばしたいスキルがあいまいな人はスキルを整理してなりたいものを調べると、はかどります。

デザインスキル

  • ツールの使い方
  • UX
  • UI
  • グラフィック
  • モーション

コーディングスキル

  • グラフィックの再現
  • CSS設計(HTML)
  • モーション製作
  • SASSとかのツール
  • 言語の基礎知識(生のJS/php/ruby)
  • ライブラリの使い方を覚える
  • JS/php/ruby設計

コーディングスキル

  • 解析
  • 人間心理
  • 企画力/問題解決力
  • ライティング

スキルアップのための勉強方法

個人的には「継続する」のが一番良いかなと考えています。
ですので、あなたが無理のない範囲でできるやり方を考えるのが良いかと思います。

あとは続けるだけではなく、発表や公開などをしてフィードバックをもらうと良いです。

私の場合は週に一回ブログを更新したり、作ったプロダクトの更新とかやったりしてます。

登壇とかはあまり積極的じゃなく、声をかけてもらったときだけですね。

インプットをする

私のインプットの中心はTwitterです。
そこで気になったものは、クリップして後で調べたりしてます。

あとは雑誌もよく見るようにしています。

Webデザイナーにオススメしたい雑誌からの情報収集

他にはデザイン系のコミュニティに入ったりしていて、そこで情報を得たりしています。

あまり活発なところは少ないのですが、個人的には、qranoko Communityの情報が役立ちすぎてやばいって感じです。

アウトプットする

インプットしたからにはアウトプットしないと身にならないですね。

私は自分でコード書いたりしてtwitterに投稿したり、ブログの記事にしたりしてアウトプットしてます。

未経験WEBデザイナーはブログを持ったほうが良いと思う私なりの理由

副業をする

アウトプットとは異なるのですが、副業をするのは結構スキルアップに繋がります。

他の会社さんにジョインしたり、直接クライアントと一人でやりとりしてものづくりすると普段では気がつけなかった事や自分のスキル不足が感じられて成長のきっかけになります。

副業をオススメする理由は下記の記事でまとめています。

Webデザイナーに副業をオススメする理由

ポートフォリオを作る

作ったものはちゃんと一つにまとめておくと自分のスキルを見える化にも繋がります。
やってきたことが見えると、自分の方向性も見えてきますので。

あとポートフォリオがあると色々なところから声がかかりやすいのでチャンスも結構回ってきます。

現役Webデザイナが教える転職で使えるポートフォリオの作り方

転職の準備をする

本気で転職するかは別として、履歴書と自分のスキルセットは常に整理していて良いです。

なぜこんなことをするのかというと、転職経験がない人や長く今の会社にいる場合自分の市場価値が全然見えてなかったりすることがあります。

今の会社でやれてるから大丈夫だと、いざとなったときに苦労される場合があります。

そのあたりの事は下記記事でまとめています。

30代のWebデザイナーが仕事を続けるために意識してること(メンタル編)

人に見せることで刺激をもらう

特に独学だったりで身につけてるものは本当に自分の評価が正しいのかわかりませんので人の意見を聞くのが近道です。

自分の中で完結させるだけだと、より良い方法にも気がつけなかったりします。

特に新しい事でチャレンジしてる場合は実際のWeb制作現場で使われるスキルに落とし込めるようにしたほうが汎用的ですので。

最後に

IT業界の速度は早いので、自分の時間を使ってでも学ぶのが当たり前になってきています。

そうでもしないと若手に追い抜かれて自分の仕事が奪われちゃいますので…。

私はこういった事はあまりネガティブにならず、Webデザイナとしてずっと成長できてると思っていますので、正直楽しいです(ゝω・)

Cntlog > スキルアップ・ノウハウ

Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする

Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。

インストール

まずはnpmで下記をインストールします。


npm add --dev node-sass sass-loader
npm add --dev nuxt-sass-resources-loader

nuxt.config.jsを編集する

nuxt.config.jsに全体で読み込ませたいファイルを設定します。

module.exports = {
  modules: [
    ['nuxt-sass-resources-loader', [
      '@/assets/sass/config/variable.scss',
      '@/assets/sass/config/mixin.scss',
    ]],
  ],
}

私はNuxt.jsは下記のディレクトリ構成にしていますので、必要に合わせてパスは変更してください。

これで設定完了です。
簡単でしょ(*ゝω・*)

Cntlog > スキルアップ・ノウハウ

失敗しにくいWebデザインの制作フロー

WEbデザイナーに限らずですが、Web業界は流行り廃りや進歩が早いのでスキルアップが重要ですよね。

割と私はコーディングが得意なので、それしかできないと誤解されがちですが、全然デザインもやってます。
※グラフィックデザインは苦手なので避けてますが…。

自分のデザインに自信がないって人は多いと思います。
昔私も「Web/アプリのデザインは何が正解なんだろう…」って悩んでいました。

ときにはディレクタに「これじゃない」とか、クライアントに「ださい」とか言われる事もありました。

そういった否定を避けて、プロジェクト関係者を納得させるデザインの仕方/プロジェクトの進め方を紹介します。

“失敗しにくいWebデザインの制作フロー” の続きを読む

Cntlog > スキルアップ・ノウハウ

Nuxt.jsのトラブル解決方法

今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。

Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。

“Nuxt.jsのトラブル解決方法” の続きを読む

Cntlog > スキルアップ・ノウハウ

Udemyで学ぶWebデザイナーのスキルアップに役立つおすすめの講座紹介

近年Webデザイナはデザイン以外のスキルも求められる事が増えてきました。
例えば、プログラミングやマーケティングなどです。

これらは、書籍などで学ぶのが難しく、独学でやるにしてもモチベーションの維持とかも大変です。

そんな中で私はUdemyの動画が書籍などに比べて身になりやすかったので好んで利用しています。

“Udemyで学ぶWebデザイナーのスキルアップに役立つおすすめの講座紹介” の続きを読む

Cntlog > スキルアップ・ノウハウ

Vue.jsの入門レベルを学ぶためにやったこと

ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。
私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。

とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。

手探りですが、どうやって私がVue.jsを覚えたかをご紹介します。

やった事

顔合わせするレベルで身近にVue.jsを触ってる人がいなかったもので、人に聞くことは基本的にしていません。

ネットで調べたことばかりです。
学んだサイトは書籍やサイトは以下になります。

ドットインストール

一番最初にやったことはドットインストールです。
あるかなーと思って調べたらVue.jsがあったので、すぐさま受講しました。

安心のクオリティですので、Vue.jsの触りの部分はすぐに理解できました。
応用みたいなのはやっぱりやって覚えないとって感じです。

Vue.jsの講座は一部有料ですが、一ヶ月980円で学べるのでコスパは良いです。
講座自体は短いので半日くらいで終わらせれます。

速習Vue.js 速習シリーズ

Kindleですので、自分のペースで戻ったり飛ばしたりして気になるところを中心に学びました。
ドットインストールの講座に比べ、幅が広く解説してあります。

プログラミングの書き方というより、学び方や調べ方が書いてあってその当たりが非常に役立ちました。

Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワーク

Vue.jsといえばNuxtというくらいの評判を聞いてこっちにも手を広げました。

未だにNuxtがなんなのかよくわかっていないのですが、Vue.jsでSPAを作るためのフレームワーク群というイメージです。

触ってみるとVue.js以上にややこしくて、理解するのに時間はかかりましたがこの本とこれまで学んだことの質がちょうどマッチしていて、調べたり何度か繰り返すうちに分かるようにはなりました。

実際にネットに公開されてるHTMLテンプレートを自分だけで、nuxtに組み込んむくらいはできるようになりました。

評判の良い本

私はまだ全部は読み切っていないのですが、フロントエンジニア界隈の人がべた褒めしてる本がこちらです。(これのおかげでハンズオンがしやすくなったという評判です。)

基礎から学ぶ Vue.js

公式サイトを見て、「なるほど、わからん」ってなる人はこれを読むと中身が入ってきやすいくらいのでレベル感で書かれています。

本自体がそれなりに分厚いので、プログラムが苦手な人はちょっと最初から読むと大変かもしれませんが、機能ごとに丁寧に解説されてる(図解入り)ので、何度も読める・調べれる本でした(流し読みはしました)

書籍専用のサポートページもあります。

 

インストールしておくと良いもの

Vue.js devtoolsをインストールしておくとvue.jsのデバックがしやすくなるのでオススメです。

Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう!

Cntlog > スキルアップ・ノウハウ

ユーザーの思考を見落としたデザインから見えてきたもの

ふとECサイトを見ていたら、ユーザーを誤解させるページを見つけました。

悪意があったり、ダサいからダメという類のデザインではなく、初心者が陥りやすい例かなと思いました。
また、小馴れたデザイナでも陥りやすい失敗だと思い、少し自分の中で考察してみました。

“ユーザーの思考を見落としたデザインから見えてきたもの” の続きを読む

Cntlog > スキルアップ・ノウハウ

Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット

SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。
簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。

やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。

本記事では、ワイヤーを作るときに私が使っているテンプレートを幾つか紹介します。

UI系の素材

Atomic Design Template Sketch Resource

Atomic Designのワイヤーフレームテンプレートです。

データをダウンロードする

Wireframe Kit for Atomic Design Sketch Resource

こちらもatomic designを意識したものですがUIパーツが豊富です。
こういうのを一つ持っておくと、便利です。

データをダウンロードする

Mobile UI Wireframe Kit Sketch Resource

アプリなどで、画面のフローを考えるときに便利です。
最近プロトタイプも流行っているので、デザイナ/プログラマとのコミュニケーション、意識合せをするのによく使います。

データをダウンロードする

有料で使いやすいもの

Sketchは色んな人がダウンロード出来るように無料でUIを公開しているのですが、有料のものもあります。

私も最初は無料のものばかり使っていたのですが、最近は有料のものを購入してそっちを使い続けてる事が多いです。

購入する場所

幾つかUIテンプレートを購入できるサイトはあるのですが、私はui8さんが気に入ってここで探して購入しています。

https://ui8.net/

気に入ってる点は、価格が安い(5000円くらいで大体買える)ところと、人気のもの、新しいもの、セール中のものが簡単に探せるからです。

またカテゴリもUI Kitやワイヤーフレームなどに分けられていて必要なものが探しやすいからです。

singleton-2

LPなどに使えるテンプレートです。
ブログやEC系などジャンル別によく使うデザインが含まれているので、組み合わせでデザインに反映できます。

価格 $48
https://ui8.net/products/singleton-2

Frames Wireframe Kit

主にPC版になりますが、これ一つでクライアントとの打ち合わせがスムーズにいけます。
色んなレイアウトのデザインがあるのでこれに構成していくだけで、いい感じのページを作っていけます。

あと、有料の素材系の中ではめずらしく、$12と格安です。

価格:$12
https://ui8.net/products/frames-wireframe-kit

その他

Sketch Hunt Arrows and Lines Pack Sketch Resource

データをダウンロードする

Phoenix Startup UI Kit Pro

こちらも、組み合わせでサイトが作れちゃう系ですが、これの凄いところはこのデザインのHTML/CSS/JSのテンプレートが含まれているところです。

Sketchで確認をとれたらすぐにコーディングの方でその組み合わせを反映してすぐに公開まで辿りつけます。

価格:$88
https://ui8.net/products/phoenix-startup-ui-kit-pro

最後に

Sketchは軽くて、使いやすいので様々な場面で活躍します。

デザインのテンプレートも豊富にあるので、デザイナがいないときでも組み合わせで素敵なデザインが出来上がります。

短縮できた時間はコンテンツやマーケティングを考えるのに使えるとよいですね(ゝω・)

Cntlog > スキルアップ・ノウハウ

Udemyの口コミ・評判を調べてみた

Udemy(ユーデミー)の口コミや評判を調べてみました。

何気なく調べてみると、満足してる人、いまいちだった人といますが大方満足しているひとが多かったです。

良かったという口コミ

通勤時にも使いやすいUdemy

私もこれらの方と同じ感想ですが通勤時に使っていて使いやすかったです。
Udemyのいいところは動画をダウンロードしておけるので、通信容量を圧迫することはないのでありがたいです。(結構ダウンロードしておける動画学習のサイトって少ないんですよね)

Udemyのセールと価格について

Udemyの人気の理由は私は価格だと感じています。
口コミを調べていると、皆さんコスパの良さを言及している方が多いです。

だいたい何らかしら、セールをやっていることが多いので安くなっているときにまとめて買っている方が多いみたいです(私もその一人です)

安くなっていないか、ついついチェックしてしまいます。

Udemy

内容についての口コミ

私もudemyの動画は内容の質が高いのが良いところだなと感じています。
本などですと、初心者向けで全体をカバーするものが多かったりするのですが、udemyですとピンポイント知りたいところを学べたり、講師の方に質問できるのが良いなと思っています。

悪かったという口コミ

確かに私も「うーん」と思う動画には出会ったことはありますが、講座を買う前に一部視聴できますし、評価やコメントとみて購入を購入を決めていますね。

私も買って失敗したかな?と思う講座はありましたが、udemyには30日返金制度があるので、それを利用すると良いですよ。

確かに外で動画を見ようとすると結構重くなってしましますので、私は外で見るときはあらかじめ講座をダウンロードしています(一括のダウンロードや講座の章毎に個別ダウンロードするなど選べます)

最後に

Udemyの口コミや評判を調べて見ましたが、大方私も同じ感想で多くの人を満足させているサービスだなと思います。
特に満足されている方はプログラミングやWeb系の方が多いようですね。

私自身でUdemyを使ってみた感想を下記で記事にしているので、よかったらごらんください。

動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想