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

npmで書くときの簡単な書き方

package.jsonを作る

この書き方だと何も聞かれずにいい感じのpackage.jsonが作られる。

npm init -y

packageのインストール方法

npm install ––save-devの省略系です。
書き方が短くなって便利。

npm i -D (package名)

これの実行後package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。

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

Vue.jsとmoment.jsでカウントダウンタイマーを作る(サンプルコード有り)

カウントダウン系のライブラリは結構ありますが、Vue.jsとmoment.jsを使うだけで簡単にカウントダウンの数字を生成できるのでご紹介します。

vue.jsとmoment.jsを使う理由

vue.jsは簡単にデータの受け渡しができるので、リアルタイムにデータの反映ができるようになります。
また、moment.jsDate()を直感的にというか便利に加工できるので使います。

“Vue.jsとmoment.jsでカウントダウンタイマーを作る(サンプルコード有り)” の続きを読む

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

マイクロソフトのイベントにデザインのプルリクしてみた

Microsoft Connect(); 2018の日本語版のイベントページが開催の2日前くらいに公開されていました。

下記のツイートにもあるようにサイトのデザインが質素だったので、このくらいならプルリクできそうという軽い気持ちでプルリクしました。

“マイクロソフトのイベントにデザインのプルリクしてみた” の続きを読む

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

デザイナーがプロトタイプを始めるときに知っておきたいこと

先日FRONTEND CONFERENCE 2018にて「デザイナ主導のプロトタイプ開発のススメ方」という発表をしてきました。

スライドを公開した所自分的にはそれなりに好評のようでしたので、ちょっと記事でも補足したいと思います。

発表したスライド

私がプロトタイプを通じて感じていること

プロトタイプを作る事自体はデザイナがいなくても作れます。
ですが、デザイナがいる中でプロトタイプを作る意味はあります。

特に私が感じている事は開発初期にデザイナが入るとメンバーのコミュニケーションがはかどりやすく、アイデアが形にされるスピードが上がるということです。

プロトタイプは各々自分のイメージやアイデアを口にして伝えることが多く、メンバー間で同じイメージが共有しやすいかと言われればそうではありません。

そこでデザイナが入ることで、イメージの共有・コミュニケーションの活性化が可能と考えています。
とくに、クライアントやユーザーなどITスキルに疎い人などは、小難しい横文字や専門用語が打ち合わせの中で出てくると萎縮してしまいがちです。

ですが、クライアント(プロダクトマネージャー?)などこそが発言をして方向をまとめないとプロトタイプであっても作ったものが歪(いびつ)になってしまいがちです。

デザイナというと完成形で評価されると誤解されていましたが、最近は課程こそ評価できるものなんじゃないかと考えています。

プロトタイプを作れるデザイナーはキャリアアップの一つ

エンジニアであれば年収1000万円の人はそんなに珍しくないかと思います。

しかしWebデザイナはどうでしょう?
正直年収600万以上という人ですら珍しく感じます。
もちろんWebデザイナをベースに転職を繰り返しその金額まで上がる人はいるかと思いますが、エンジニアのように現場で活躍しながら高額な年収を得るのはWebデザイナでは難しいという印象を持っています。(フリーランスは別で考えています)

なぜエンジニアだけがその金額になるのか?を考えるとアウトプットしたものの成果が見えやすい、その人だから作れたというのが伝わりやすいというのが一つあると考えています。

しかしデザインとなると「その人だから作れた」はあってもアウトプットしたもの成果が見えにくいのがデザイナの年収の天井を低くしている一つの要因かと思っています。

当たり前ですが、100万かけて作ったデザインでデザインの良し悪し出300万の利益がでるなら、喜んでデザインに投資する経営者を多いです。

しかしデザインのみでそういった再現性のある利益を出すのは難しいです。
ですので、プロトタイプを使い、ユーザーのニーズはあるのか、市場はどのくらいなのかを簡単にでも知るというのは重要で、それが(ある程度)わかるからこそデザインに投資ができるという事に繋がると考えています。

そして、市場とニーズがわかったとして、後から入ってきたデザイナがそれまでのチームのフィードバックを理解してデザイン出来るかというと難しいです。
もしそれが可能なら、「クライアントとディレクターで打ち合わせ」→「ワイヤーが確定したからデザインする」→「出来上がったデザインでエンジニアが組み込む」といった分業の形でももっと上手く開発ができきるかと思います。

ですので、デザイナ自身がプロトタイプを作る段階からプロジェクトの中心に参加することで、これまで以上にデザインに対しての付加価値を与えれるのではないかと考えています。

この言葉が正しいのかわかりませんが、これもUXデザイナー?の一つのスキルかと考えています。
※スライドの中にある「5つの段階で考えるユーザー中心のデザイン」の部分に繋がります。

もちろんUXデザイナを名乗ったからといって、需要が増え、年収があがるなら今からでも私は名乗ります。
しかし、名乗った所で何も変わらないでしょう。UXデザイナを名乗ることより、「デザイナ」として何ができるのかをアウトプットしてこそ、ニーズに答えれるんじゃないかなと思っています。

なお、私は年収を上げたいわけではなく、原則働きたくないので短い時間で成果を出せるデザイナでありたいと考えています。

分業の体制を脱出したい

WEB/アプリにかかわらず、近年は職域を明確に区切れず、グラデーションのように複数の職域を侵食しながら開発するシーンが増えてきました。

Webデザイナがphpを書けるもの珍しくないですし、エンジニアでデザインをする人もいます。
なぜそういったことが起きてるのかというと、言われたものを作るウォーターフォール式の開発ではなく、柔軟に動けるような開発体制が求められているからと考えています。

昔は分業で開発してる会社が多かったですが、今回りを見ると複数の職域をまたぐ開発者ばかりいます。
※少なくとも私の周りの話です

そんな中でデザイン専業でやっていくのはニーズに応えるのは難しいと思っています。
開発の初期からチームに価値を提供できるデザイナになることは近年のニーズに応えれる一つの方法と思いこんな感じで今後も自分自身やっていきたいなと考えています。

イベント参加者の反応

最後に

プロトタイプを作れるデザイナというのはあり方の一つです。
私はこのやり方が一番「あるべきもの」を作れる近道と思っています。少なくとも今は。

まだまだ開発のフローは変化していきますが、「プロダクトの価値はなにかを自分から整理できるスキル」はデザイナとしてもっていて損のあるスキルではないので、今後時代が変わっても重宝されるかと思います(ゝω・)

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

グロービス学び放題を利用してみた感想と評判

グロービス学び放題とは

グロービス学び放題はビジネススキルを中心とした学習コンテンツを定額制で学べる動画サービスです。

動画は1500本以上あり、アプリなどでダウンロードもできるのでオフラインでいつでもどこでも視聴できます。

2016年8月に法人向けサービス、2017年3月には個人向けサービスとして運用され始めました。
運営は「グロービス」の名前でピンと来る方もいるでしょうが、ビジネススクール、企業研修などで知られるグロービスが運営しています。

つまり、累計150万部の実績を持つ、MBAシリーズも動画で学べるということです。

人気のポイント

社会に出て、なかなか誰も教えてくれない「ビジネス」の事をあのグロービスの内容で学べるというのがユーザーが期待するところですが、それ以外にも下記のようなポイントがあります。

  • レッスン内容のレベルが高い(ベストセラーのMBAシリーズが動画化されてるので)
  • 豊富なコースと動画
    • コースは100、動画の合計数は1500以上あります。
  • 動画のクオリティが高い
    • きちんと見やすく作られている
  • 動画一本一本が短くて覚えやすい
    • スキマ時間で勉強しやすい
  • アプリがある
    • 動画をダウンロードできるので外でもスキマ時間をみつけて勉強できる
  • 値段が安い
    • 月額1,980円でレッスン受け放題です

料金

料金は月額、半年、年額と3つのプランから選べます。

  • 月額プラン:1,980円
  • 半年プラン:9,900円(月額1,650円)
  • 年額プラン:17,820円(月額1,485円)

個人的にはちゃんと自分が動画で学べるか、学ぶレベルは自分に合ってるかを見てから継続を考えた方が良いかと思うので、初めは月額にして、続けれそうなら他のプランにアップする感じで良いかなと思います。

動画の数は1500以上ありますので、一ヶ月で全部見るのは難しいかと思います。

ちなみに動画は日々追加されていってます。

どんなコースがあるのか

コースのカテゴリは下記のように分かれています。

  • チュートリアル
  • 思考
  • 戦略・マーケティング
  • 組織・リーダーシップ
  • 会計・財務
  • グローバル
  • キャリア・志
  • 変革
  • テクノベート
  • 創造

私はWeb関係の人間なので、「思考」と「戦略・マーケティング」を勉強してます。

なぜグロービス学び放題を初めたか

最近作る時間よりもクライアントと話す時間が増えています。
そんな中で話についていけなかったり、自分の考えが甘いと痛感するシーンが増えてきたのでなんとかしたいなと思ってはじめました。

最初はスクールみたいなところを探したのですが、なかなか値段が高かったのと続けれるか不安だったので、
とりあえずで初められる「グロービス学び放題」でやってみるかーと思ってはじめました。

講座をうけるとどう変わったのか

経営知識を「知っている」レベルから「仕事で使える」レベルに引き上げるのが「グロービス受け放題」です。

今後マーケッターや企画、ディレクターを目指す人などは覚えておきたい内容が勉強できます。
特に学んだ事をすぐに実践出来る現場にいる方はすぐに身につくかなと思います。

講座を受けていきビジネスフレームワークを身につけていくと、悩む事が少なくなり自分なりの道筋がパッとひらめくような感じになっていくので「どうすればよいか」といった考えることに時間を使うのに集中できるように変化したなと実感しています。

例えば上司や取引先が考えてる事・心配していることなどもよく分かるようになり、仕事を進める中での衝突も減りました。というか信頼されるシーンが増えました。

他にも部下がつくった企画書なども見るときもフィードバックの仕方が変わりました。
以前は感覚で話すことが多かったのですが、数字や人の心理など論理的な部分でフィードバックできるようになり、部下の育成なども上手くなってきたかなと思っています(自画自賛ですが…)

ちなみに、動画の最後には理解度確認テストがあます。
これに合格すると履修バッジやコース修了証がもらえますので、動画を見るだけで本当に自分のちからになっているか心配な人は自信が持てるようになります。

初心者でも安心して使えるシステム

動画数やコースが多いので何から始めて良いのかわからなくて心配…なんてこともあるかもしれませんが大丈夫です。
質問を答えていけば自動でカリキュラムを決めてくれるものもあります。

シチュエーション別、カテゴリー別がありそれを選んで学んでいくだけです。
もちろんいつでも好きなコースに変更することもできます。

また、コースマップを開くと、何を学んで他に何を学んでいないものがあるのかがパッとわかります。

学べるコースについて

動画のレベル

ビジネスに最低限必要な基礎知識から、活用方法をベースに学べます。
さらに、実践での活用事例を踏まえた内容まで学べるようになっています。

目的に応じてビジネス経験の浅い方から基礎を学んだ方がさらにリーダーとして成長するための学びができます。

使いやすいなと感じたポイント

再アクセスしたときは、前回の続きからできる様になっています。
1週間でどの程度時間学んだかを見れるようになっているので、先週は時間をとってなかったのも一目瞭然なので、スケジュール管理やモチベーション的には良い刺激になります。

解約方法

基本的には自動で契約更新されていくのですが、自動更新停止はできますのでちょっと試したいとか、連休中に一気に勉強したいとかの人でも安心して使えます。
自動更新停止と退会とは何ですか?|よくある質問

ちなみに、グロービス学び放題は10日間の無料体験レッスンがあります。
申し込み時にクレジットカードの登録が必要ですが、10日前までに解約すれば料金は発生しません。

グロービス学び放題を始める

やってみて良かったところ、悪かったところ

良かった所

  • 家でも勉強できるの自分のスケジュールに合わせやすい
  • パソコン以外でもスマートフォン、タブレットを使って外でも学べる。
  • 動画が分かり易いくて、説明が丁寧。
  • 動画が隙間時間にも学べる量なので続けやすい。
  • 単純に安い(ビジネススキルをこの値段で学べるのありがたいです)
  • 実際ビジネスに役立てる実感がある

悪かった所

  • 動画だけだと疑問が出てしまうときがあるので、そういうときは本などで自分で調べないといけない。
  • 学ぶのは基礎なのでめちゃくちゃ深いというわけではない。

最後に

ビジネススキルや思考のフレームワークはこれまで本で学ぶしかなかったのですが、動画で学べるというのは結構覚えやすいです。
これはUdemyでも同じことは言えますね。

ビジネススキル学んだことがないビジネスマンはやっておいて損はないくらいには思っています。
特に若い人は。

Webデザイナなど作ることのスキルを上げる事と同時にどう売るかという点も一緒に勉強しておくと今後転職ときなどのときも有利に動けますよ(ゝω・)

グロービス学び放題を始める

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のトラブル解決方法” の続きを読む