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年間利用してみた評判と感想

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

Webデザイナーとして成長し続けるために気をつけている事

IT業界にいると成長してあたり前のように思われがちですが、成長のスピードにはやっぱり差があります。
私も最初は手探りでスキルアップしていましたが、慣れてくると自分の生活の一部にまで落とすことができました。

本記事では、私が日頃心がけている事を紹介します。

デザイナスキルを上達させる視点を持つ

デザイナの成長というとどんな事を想像されますか?
カッコイイデザイン、可愛いデザインなど雰囲気のある出来れば良い。PhotoShopなどのツールを上手く使えれば良い。

多分これは成長の途中経過で成長の天井が見えているもので、これを伸ばすのを目的に成長させるのはオススメしません。

いわゆるデザインが上手い方は、さまざなな視点からデザインを見て、それを洗練させています。

よく動物の視点で例えられたりします。

  • 全体をみる「鳥の目」
    • 全てのアウトプットに一貫性はあるか?
  • 細部をみる「虫の目」
    • 細部にまで統一感があり違和感を感じさせないか
  • 潮流をみる「魚の目」
    • ユーザー・ターゲットの背景を考えてその人が欲しいものになっているか
  • 内面をみる「心の目」
    • ユーザー・ターゲットが気がついていない、心の奥で欲しがっているものを提供できているか

これらは人によってはデザイナがすること?という人もいますが、これが自分ひとりで完結できる人は優秀なデザイナで「本質」を捉えたものをユーザーに提供できています。

すべての視点を持つてるならそれに越したことはないですが、自分の得意な視点を知っておくだけでも強いです。

私の場合は解析やLPが得意なので、これでいうところの「魚の目」「心の目」が強いと自負しています。
自分の得意どころがわかると、スキルも伸ばしやすいのでがむしゃらにやるよりは効率的です。

スキルを身につける順番

自分の得意どころも重要ですが、基礎的な部分など自分のWebデザイナをしてのフェーズによって学ぶ分野が変わって来ます。

個人的には分野の違いはあれど下記の順番で覚えると良いと感じています

  • 基本のレイアウトができる
  • 華やかなビジュアルが作れる
  • 分析力がある
  • コンセプトを作れる
  • 解説力がある
  • 実行力/課題解決力がある

情報収集を定期的にする

成長と言っても何をやるか、これから何が必要かなど業界の情報を得るのは重要です。
IT業界は変化のスピードが早いので去年できていたことしかできないようですと、それは成長をとめているわけではなく、退化になります。
若手はどんどん成長していますので、油断しているとすでに先を越されてしまします。

かといって情報収集して、インプットするだけでは自分の糧になりにくいのでちゃんとアウトプットも必要です。
情報収集→情報発信が基本です。

私の情報収集方法は以前記事にまとめていますので、下記をご覧ください。

Webデザイナーにオススメしたい雑誌からの情報収集
時間の無いWeb屋が実践してる効率的な情報収集

仕事以外でもインプットとアウトプットをする

情報収集って気がつくと、普段の仕事に関わることばかりになってしますのでが並行して自分の興味のあるものを調べてみてください。

やりたくない仕事もあると思いますので、好きなことを調べているときはそれが息抜きになって本業もスムーズに進めれたります。

仕事以外にも学ぶのか…と躊躇してしまう方もいますよね。
個人的には別に就業時間外で勉強はしなくてもいいとは思っています。
じゃあなんで私が日々勉強しているかと言うと、自分がちゃんと仕事出来るようにするためです。
私の場合周りの人が凄い人が多いので遊んでるとすぐにおいてかれてしまうのもあってアウトプットを続けています。(別に嫌々でやってるわけじゃないですよ。念のため)

私もこのブログを通じてアウトプットを続けれていますのでブログはじめるのオススメです。
もちろん続ける前提ですけど。

ブログを続けるメリットは下記にまとめています。
未経験WEBデザイナーはブログを持ったほうが良いと思う私なりの理由

Webデザイナでアウトプット続けてる人ってほんと少ないんですよね。(ちょっとさびしい)

定期的にコードを見直す

コーダーであれば、自分でコードを書くでしょうがメンテナンスとかしていますか。
gitなどがあればチョットずつ進めれたり、人からレビューをもらえたりして成長したりできるので自分で書いたコードを見直さないので自分でそのチャンスを奪っている事になります。

もしあなたがgitに興味を持っているなら、ぜひgithubをはじめて見てください。
コードを公開すれば、人の役にも経ちますし、人に相談もしやすくなりますのでコードを見直す機会が増えます。

余談ですが、gitが使えるとリモートワークもしやすくなって、今後の働き方の選択肢がぐっと広がりますよ。

リモートワークの副業に興味がある方はコデアルさんがオススメです。
興味があるかたは下記記事をご覧ください。

副業に最適なリモートワークOKな求人サイト コデアルがオススメ

人のコードを見る

コードを見ないと言うのは、自分のコードだけで無く人のコードも含みます。
人のコードを見ると言っても何からはじめていいかわかんないですよね。

私がオススメするのはフレームワークやライブラリのコードを見る事です。
理由としては下記です

  • 大勢の人が使いやすい設計になっている
  • readmeやDocumentがあって読みやすい
  • 読んだコードを業務で活かしやすい
  • TOPレベルの人たちのコードや設計に触れられる
  • 自分の知らない記述を知る機会が増える

Bootstrapなんかだと普段自分が使って無くても、引き継いだ案件やこれから一緒に組む人が使ってる可能性は高いので、損はしないかなと思います。

他にも質問サイトのコードを見て自分で回答するのも力になりますよ。

そういったサイトですが、Q&Aサイトの「teratail」さんあたりが一般的ですね。
PHPやRubyとかのコードが多いと思われがちですがCSSとかJSも結構ありますので、多分答えれるものが幾つかあるはずですよ。

teratail

時間をちゃんとかけてやりきる

とりあえず、触って見るというのは大事なんですが、基礎だけ触って見るだけだと中々スキルにまで至らないんですよね。

ちょっとだけ勉強するのが悪いというわけではないので、誤解の無いように。

かと言って、はじめっからいつも全力で!みたいなスタンスだとしんどいので、ちょっとずつ新しい事をや気になる事をはじめて、力試しみたいにどこかできちんとやりきるみたいなタイミングを作ると良いです。

その時の全力でものを作ると人に評価もしてもらいやすいのでオススメです。

スキルって目に見えるものではないので、時々その成果を形にしておくと思ってもいないチャンスが訪れたりします。

流行りのものばかり触らない

繰り返しになりますがIT業界は変化のスピードが早いです。

今流行ってるものばかり触っていると、自分が何が得意な人なのか説明できなくなります。
人の時間は無尽蔵にあるわけではないので、自分の将来に役立つスキルを選定する必要があります。

例えばWebデザイナを一言で言っても、グラフィックのセンスやプレゼンスキル、コーディングのスキルなんかがぱっと出てきますが、今後の将来を見据えるとAIや自動化に合わせるために、解析のスキルや統計学を学ぶという選択肢もあります。

他にも動画に手を出すという案もありますね。

業界が求めている分野ではなく、自分が必要な分野を学ぶようにするのがオススメです。

新しい事へのチャレンジをし続ける

同じことばかり続けていても、成長はしづらいです。

ちょっとずつでも新しい事は初めて行くと飽きずにいて楽しいです。
何をやっていいかわからないという人は、自分に身近な別の職種の人がやってることに興味を持ってみてはいかがですか?

デザイナーであれば、ディレクタやプログラマなどと関わることが多いと思いますのでその人達がやってる事で自分にもできそう、やってみたいというものがあればそっちの方向に手を出してみるのはいかがでしょう。

自分で考えるクセを持つ

SNSなどをしてると毎日人の面白い投稿を目にして刺激を受けます。

バズったものなどを見て、自分ならどうする?とか考えると自分に出来ること、できない事が見えてきます。
何より「人に求められるものは何か」という事がひらめきやすくなるのでビジネスチャンスや社内の評価が上がりやすくなります。

私は「俺の嫁が可愛い」というサイトを作ってバズったので、これが最高の成功例かなと思います。
その当時の振り返りは下記をご覧ください。
公開6日で100万PVを叩き出したWebサイト「俺の嫁が可愛い」を公開してみて

自分で考えるクセを付けないと「指示待ち人間」になったりなぜこれが良いのか「説明できない人間」になりやすいので、色んなところで損をしてしまいます。
誰かに頼るのは悪いことでは何のですが、頼らないと一人でできない事ばかりだと、自分でやりたい事もできずに詰んでしまいますね。

人のアドバイスを聞く

私って頑固なんですけど、信頼してる人のアドバイスはちゃんと聞くようにしています。

やってみたら良いよとか、こうしたらどう?とかアドバイスをもらったらまずは否定をせずにはじめて見ます。
やってみて駄目だったら、ゴメンなと謝るようにしています。

こうしていると自分一人では気がつけな経験値が溜まります。
否定をすることは簡単ですが、それで得るものはないので、まずはやってみるの精神はオススメです。
失うのは時間と時々ちょっとのお金くらいですが、私は得たもののほうがデカイです。

アウトプットを続ける

結局これが1番大事かもしれません。
自分がインプットしたものを常にアウトプット出来る人は強いです。

自分の意見、相手の意見を汲み取りつつ、自分のサービスや作品を伸ばせる人はデザイナとしてかなり優秀です。

なにより見てもらえるものがあるので、説得力があるのが良いですね。

もちろん完成形で何でも出すではなく、「いい感じのところで早めにデザインを晒せるスキル」というのが大事です。この辺は心構えかもしれませんが。

転職のためにも



ずっと今の会社にいるのであれば、多分仕事を片付けてるだけで評価はされていくと思います。
今後転職するときなどには、業界で通じるスキルが求められますので自分がやりたい事、続けれそうな事を学び続けて「保険」をかけているだけです。

お陰で私はいつ会社を辞めても次が見つかるくらいのスキルは見つけれましたので、割りと気楽に働けています。

先程の話と重複しますが、インプットだけだと評価がされにくいのでアウトプットも一緒にしておくとポートフォリオにも使えてます。
大体転職しようとすると、作品が無くて応募に困るとか年収が下がってしまう傾向にありますからね…

もしあなたが転職の事を考えてるのでしたら、以前記事を書きましたのでよかったら見てください。

Webデザイナーが転職するために初めにやっておくこと

Web以外の趣味を持つ

Webの勉強ばかりしてるとはっきり言って視野が狭まります。
自分の仕事にかかわらない趣味を持つと息抜きにもなりますし、ユーザーに視点でものが見えるようになります。

私の場合ですと、自転車が趣味なのですが勉強の合間に走って息抜きをしています。

仕事以外で自転車関係のサイトや実店舗に行く機会が増えますのでユーザーの気持ちを取り戻す事ができます。(仕事してると、どうしても開発者目線になってしまうんですよね)

言い訳をしない

こんな言い方をしてしまうと、凄いプレッシャーを感じるかもしれませんができなかったときに「次はこうやる」と期限を決めたり手段を固定してるだけです。

できなかった言い訳をしても、自分を納得させるだけで成長には繋がりません。(もちろん病気でとか、自分に非がないもののありますが、どちらにしても言い訳しても良いことないんですよ)

人に評価してもらう

アウトプットが前提になりますが、なるべく人に評価してもらったりしています。
そんな堅苦しくなく、こんなの「今作ってるんだけど、どう?」とかかなり気楽なものです。

私の場合サイトの解析も得意なので、どっちのバナー/コピーのほうが反応が良いか、SEOでのテストとかGoogleアナリティクスで評価を見たりもします。

やりっぱなしよりも、反応を自分で受取にいくと次やるときのモチベーションにも繋がるので良いですよ。

最後に

Webデザイナの仕事しててすごいなって思うのは10年以上やってても常に学びはあるしやりたいことはどんどん溢れてくるとこです。

そんな中でも若手ですごい人はどんどん増えてきて上の世代に噛みついてる感じも好きで、私はこのプレッシャーのなかで、成長していくのがすごく楽しいです。

ダメ出しされて凹んだり、何度も何度も修正しても、自分も相手にも満足してもらえなかったり、いろんなことがあっても、それでもこの仕事をしてるっていうのは…やっぱりWebが好きだからなんだと思います。

もしあなたが今、苦境に立たされているなら諦めずにいつかは乗り越えられると思って頑張って欲しいです。(苦痛に感じるなら身を引くのも手ですが。このままじゃダメとおもって行動するのは良いことです。)

もし勉強がてら実力だめしもしたいという人は、副業という方法もあります。
私は副業もしているのですが、自分の将来に投資ということでしたらこちらの方法もオススメですよ。

社内ではできない事が出来るので新しい視点と実績を持つことができます。

Webデザイナーにオススメな副業の始め方

でも働きたくないって気持ちが毎年どんどん高まってるんですけどね(ゝω・)

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

Webデザイナーが3日でスマホアプリを公開した方法

最近自分でアプリを作って公開しました。(褒めてください!)

ホウビンゴ

まじめに3日くらいで作りました。
以前にも一度アプリを出したことはあったのですが、ちょっとコードを変えただけのパッケージものだったのでアプリ作ったとは言いづらかったのですが、今回はちゃんとコードを0から書いて自分でアプリを作りました

作った理由というかきっかけは友人がアプリ開発の書籍を最近出したからです。
Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

私はこの書籍のメインユーザーの想定に近いということでこの本のレビューに少し参加しています。

レビューした時に「あっ、これ私アプリ作れるわ」みたいな気持ちになったので、年末の連休を利用してアプリを作りました。

この記事では、この本を通じて約3日でアプリを公開した一連の流れを紹介します。

“Webデザイナーが3日でスマホアプリを公開した方法” の続きを読む