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

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

何かを学ぶというと人に習うか、本で学ぶ事がわりと多かったのですが、最近は動画で学ぶ機会も増えました。

私はUdemy(ユーデミー)という動画学習サービスを利用しています。
今回は一年間ほど、使った感想とUdemyの紹介をしていきます。

世界最大級のオンライン学習サイトUdemy

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

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

Webデザイナーが効率よくHTMLコーディングができるPugのメリット

2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。

保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。

今日はそんなPugのメリットをご紹介します。

“Webデザイナーが効率よくHTMLコーディングができるPugのメリット” の続きを読む

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

簡単にスクロールアニメーションが設定できるAOS(jQuery不要)

最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。

一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。

今回はJSをほぼ書かずに簡単にスクロールアニメーションが設定できる「AOS(Animate On Scroll Library」をご紹介します。

まずは試しに実装してみたサンプルをご覧ください。

サンプルページ

“簡単にスクロールアニメーションが設定できるAOS(jQuery不要)” の続きを読む

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

コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法

Webデザイナーになろうとして、まず最初につまずくのがコーディングです。
CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。

本記事ではCSSが全然わからない方がCSSのコーディングに慣れるための勉強法を紹介します。

概念的なものを知る

まずCSSの書き方どうこうを覚えるより、まずはWeb制作の全体感を覚えたほうが、自分が担当する範囲がイメージでき、必要性が見えてくるので覚えやすくなります。

「CSSはコーディングするために必要」という考え方だけだと、どうしても作業的な見方になりがちなのですが、プロセスが見えてくると何をすれば良いのかが見えてくるので、まずは全体像の把握をおすすめします。

全体像を学ぶのは簡単なようで難しいです。
個人的には下記の書籍をオススメします。

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

こちらはWeb制作入門書として人気の書籍です。
制作の「背景」や「理由」を学び、応用力をつけれる1冊です。

インターネットの仕組みから、サイト制作のワークフロー、
HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、
順序立てて学べます。

「すでに知っているよ」という方も慢心せずに一度目を通してみると気づきがあって「自分で考える力」や「ずっと役立つ応用力」が身につくでしょう。

コーディングの基礎知識

Webデザイナーが最低限覚えるコーディングといえばHTML/CSS/JavaScript(jQuery)となります。

HTML

HTMLはマークアップ言語と言われるもので、<body></body> <div></div> といった感じでタグで囲われるものが多いです。
※imgタグのように囲われないものも存在します。

HTMLが何をしているのかというと主に検索エンジン(SEO)への対応の強化をしているものです。
適切なマークアップをすることで、Googleの検索ロボットに「ここのページがどんなページで、どんな情報があるか」を整理して意味をつけた状態で伝えます。

例えば<main>タグでくくられた部分はそのページのメインのコンテンツとして検索エンジンには理解されます。

CSS

MTMLは要素に意味を持たせるものに対してCSSは見栄えを整えるものです。

大きく分けるとCSSでは下記の事ができます。

  • レイアウトを整える
  • 色を変える
  • 大きさを調整する
  • 線をつける
  • 形を変える
  • アニメーションをさせる

JavaScript(jQuery)

javascript(jQuery)はHTML/CSSに比べて難易度が高いですが、これが使えないと出来ることが限られてしますので、今需要のあるスキルです。

JavaScript(jQuery)では、ユーザーの動作によって動的なアクションを設定出来るものです。

例えば、クリックしたタイミングな何かの要素が見えたり、スクロールしたら、何かがアニメーションしてきたりします。

JavaScript(jQuery)が使えるようになると出来ることが一気に広がりWeb制作が楽しくなります。

基本の勉強

全体の概要を把握した後は、実際に手を動かす事でCSSを学びます。
オススメは下記2サイトのカリキュラムを受ける事です。

無料で学べるので、気軽に開始できます。
2サイトともそれなりの時間は必要ですが基礎は大事ですので、時間をかけてわからないところをそのままにせずにしっかり学んでおくと今後の習得スピードが上がります。

ドットインストール

progate

やってはいけない学習法

これまでオススメの方法をご紹介しましたが、しないほうが良い方法もご紹介します。

丸暗記する

学校のテスト勉強の延長で「暗記」に頼るのはオススメしません。
なぜなら、Webサイトをコーディングするときには暗記では対応できないケースが殆どで、応用が求められるからです。

同様にコピー&ペーストを多様するのもオススメしません。
制作の現場でも必要なコードをコピー&ペーストできるようにスニペットを作ったりはしますが、それはそのコードを理解している人だから問題なく使えるのです。

コードの意味を理解して記述していかないとなかなか身につきません。

ノートに書いて覚える

以前CSSのプロパティをノートに書いてる人を見かけたのですがこちらもオススメしません。
理由はノートに書いたコードは検索できないので、必要なときにすぐに探せないからです。

手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。

全て覚えようとする

CSSもHTMLを「全部」を覚えようとするとかなり大変です。
私も使わない・知らないCSSプロパティとかたくさんあります。

重要度を均一にするのではなく必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。

CSSを応用するためのオススメの勉強法

CSSもHTMLも覚えただけではなかなか身につきません。
やっぱり何度もコードを書く事、そして毎日書くことが重要です。

ただCSSプロパティを覚えてもいつ使っていいかわからないとう悩みにぶつかると思います。
私はそんなときはレイアウトの模写をしました。

模写にコーディングの練習方法

デザインの表現力を上げるためによく模写を勧められますが、CSSにも同じ事がいえます。
レイアウトの模写といってもどこかのページ1ページをそのまま模写するのではなく模写したい一部だけを決めてそのレイアウトだけを模写します。

この方法だと簡単なものだと数分で終わることができますので毎日の修練にぴったりです。
同時に答えのコードもブラウザから見ることができるので、悩みすぎて諦めるということもないです。

ブラウザで対象のレイアウトがどんなCSSプロパティが当たってるか見たいときは各ブラウザにあるデベロッパーツールを使うと良いです。

Google Chromeの場合デベロッパーツールはメニューバーの表示→開発/管理→デベロッパーツールのところにあります。
デベロッパーツールを起動して確認したいHTMLを選択するとそこにどんなCSSプロパティがあたっているか確認ができます。

毎日コードを書くための環境

コードを書くのにエディターを立ち上げるのが面倒、簡単なレイアウトを作るのにHTMLとCSSのディレクトリを作るのが面倒と思う人はcodepenというサービスがオススメです。

このサービスではブラウザ上でHTML・CSS・JSが書くことができそれをすぐにプレビューしてくれます。
その他にもタグが付けれたりするので、書いたレイアウトをいつか探す時にも役立ちます。
毎日続けると、たくさんの模写が溜まっていくので自分がどのくらいのCSSの勉強をしたのかが見えるので達成感もあります。

Webデザイナーの人でCSSはちょっとできるくらいの人は、このくらいはできますみたいな共有の場にしても良いですね。

レイアウトを探す方法

Webサイトを探すときは、デザインギャラリーのサイトから探してみるのはどうでしょう。
io3000

最新のデザインに触れれる機会も増えますのでオススメです。

コーディングの注意点

コーディングは一度覚えれば簡単です。
一点注意が必要なのが、クロスブラウザの存在です。

普段みなさんは同じブラウザでWebサイトを見ているかと思いますが、ユーザーは様々なブラウザでWebサイトを見ています。

一般的なブラウザは下記になります。

【PCの場合】

  • GoogleChrome
  • firefox
  • safari
  • opera

【スマートフォンの場合】

  • GoogleChrome
  • safari
  • Android デフォルトブラウザ

同じようにCSS/JavaScriptを書いてもブラウザによって少し解釈が異なり、同じ表示にならないことがあります。

ですので、「コーディングができたー」と思ったら必ず様々なブラウザでテストをして問題なく表示されるかを確認してください。

特定のブラウザで表示が崩れてしまっては、上質なコーディングができたとは言えません。

人に教えてもらう

自分で学ぶと言うのは必須ですが、時には人に頼るのも大事です。
つまずいてるところと言うのは、検索で解決できるものではなかったり、自分のやり方が適切なのか、もっといい方法はないのかと悩む事もあるかと思います。

そういった場合は、「プロに聞く」のが1番てっとり
早いです。

周りに相談できる方がいる場合は、ちゃんと質問事項をまとめて質問すれば、ちゃんと答えてくれると思います。
(※当然頼ってばかりでは信頼関係を損ね掛けないのでご注意ください)

よくjQueryがわからないといった質問がわからないという相談を受けるのですが、正直そんなバックリな質問を受けても私もわからないです…。
ちゃんと相手が答えれるような状態まで質問を持っていかないと適切な回答はいただけないでしょう。

私も能力柄、人に教えることが多いので最近ココナラというサービスを試しに始めました。

こちらでコーディングでわからない人向けに相談に乗っていますのでよかったら、ご活用ください(ゝω・)
試しにやってるので、ずっと続けるかは不明です。

HTML/CSSのわからない方、教えます

他にもオススメの方法としては動画視聴で覚えるUdemyです。
Udemyで学ぶメリットはべつの記事でまとめていますので、ご興味あればご覧ください。
動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想

まとめ

CSSは知らない人からするととっつきにくいですが、覚えてしまえば簡単です。
最初は苦労すると思いますがコーディングはWebサイトを作るには切っても切れないですし、いつ自分が書かないといけない状況になるのかわかりません。
CSSはWebサイトを作る人には必須のスキルです。

CSSでどんな事が出来るかイメージできない、こんなことをやりたい、みんなはどうCSSを組んでるんだろう?というのが気になる方は、こちらの書籍がオススメです。
HTML5 & CSS3 デザインレシピ集

現場でよく使う実用的なコーディングの例がまとまって書いてあるので、目を通すだけでも学ぶものがあります。

本記事で苦手意識を早く克服できる手助けができたら幸いです(ゝω・)

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

【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方

4/10はなんの日かご存知ですか?
そう、フォントの日です。

本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。

とりあえず見たい方はデモを用意しているのでそちらをご覧ください。

Noto Serif CJKのデモ

“【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方” の続きを読む

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

Webデザイナーがデザイン以外のあると良いスキルと学び方

近年「Webデザイナーに求められる事が増えてきて何を手を付けていいかわからない」という声を聞いたりします。

これはIT業界の市場が拡大していってる証拠で、拡大した分の人手が足りてない事の現れなのかなと個人的には思っています。

またスマートフォンの出現など、多様なスキルが必要になってきて専任がしにくくなってるのも原因なのかもしれません。

8年も前くらい前であればWebデザイナーはデザインだけやっていれば良くて、コーディングなどの実装はマークアップエンジニアやプログラマさんたちがやってくれてたと思います。

最近はWebデザイナーはデザインに加えて、実装も出来る人がほとんどかと思います。
※分業でやってる会社さんは別ですね

デザインや実装以外でもサイトの設計やマーケティング・解析など多種を求められるケースがありますね。人数の少ないプロジェクトだと特に。

この業界覚えたスキルで一生食べていくのは難しくて、私がよく言うのは「去年と同じことしかできないのは退化であって、維持じゃないよ」です。

業界も周りも進歩しているので、同じことを続けてるだけでは取り残されるだけですね。

私もようやく、Web業界の超新星sketchを使い始めて、今風のワークフローに乗れました。

時代についていくって大切ですね。

よく、「30歳を過ぎてからでもWEB業界に入れますか?」と聞かれますが入れます。入って続けてる人たくさん見ます。

続けれている人はデザインやプログラム以外にも業務で必要でその分野のスキルに長けてる部分をすでに持ち、勉強に意欲的な人が多い傾向を感じます。

誰でも入れるという保証はできませんが、入るくらいはそれほど難しくは無いのかなという印象です。

Webデザイナに「なる」ために身に付けておくべきスキルとしては、デザインの知識、各種ツールの使い方、コーディングのスキルになりますが、それだけでは近年ではWebデザイナーを「続ける」には不十分かなと思います。

“Webデザイナーがデザイン以外のあると良いスキルと学び方” の続きを読む

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

目的別にWebデザイナの多様化を整理してみた

Webデザイナと聞くとどんなイメージを持たれますか?
実際に「Webデザイナです。」って名乗る人のスキルを並べてみると、みんな出来ること・得意な事・苦手な事が違っています。

時々「何ができればWebデザイナになれますか?」と質問されるのですが、正直「Webサイトを作ることができればみんなWebデザイナでしょ」くらいにしか私は思っていません。Webデザイナって言葉が今すごくふわっとしている感じがします。

でもWebデザイナとして「凄い」と思わせる人もいるので何が違ってWebデザイナのレベルに差があるのかを考えてみました。

Webデザイナとは

Webデザイナの主な仕事内容は、企業や個人などのクライアントから依頼されたWebサイトの情報を整理してそれをデザインすることです。
クライアントの意図を汲み取り全体の構成を考えながらそれをWebサイトに反映させて、デザインを構築していきます。

Webデザイナはデザインで良し悪しをコントロールして、情報の見つけやすさや見た目の美しさ、使いやすさが変更、最終的にコンバージョンを上げる仕事です

稀にカッコイイデザインをすることが凄いWebデザイナと思われている気がしますが私はそうは思っていなくて、結果を出せる人が凄いWebデザイナと思っています。

カッコイイ・キレイなサイトを作る事は数ある中での結果を出すための手法の一つでそれだけで結果を出せるサイトを作ることは難しいです。

Webデザイナと言ってもコンセプトを決めたりレイアウトや配色などのサイトデザインに企画段階から携わる場合もあります。
Webデザイナがどの範囲を担当するかは案件や所属会社の風土より任される範囲が異なりますので一概にこれとは限定しづらいですね。

Webデザイナ全般がやること

Webサイトの構成とレイアウトを決める

制作するWebサイトの大まかなレイアウトを決めます。
ワイヤーが作られている場合はそれを元にデザインを進めます。

基本的な構成や全体のボリュームなどを考慮し、キーとなるビジュアルやWebサイト全体のイメージを提案してクライアントに確認していきます。

Webサイトのデザインを詰めていく

他にもWebサイトの色合いや装飾などテイストを詰めていきます。

Sketchなどのグラフィックソフトを用いて、Webサイトの配色やロゴ・アイコンの配置などを決めます。
基本的に、ここまでの作業はクライアントと相談を重ねながら進めることが一般的です。

写真素材など複数あれば構成に合わせてどれを使うべきかを選定していきます。

Webサイトのコーディングを行う

クライアントからデザインがOKが出ると、HTML、CSS、JavaScriptを用いてコーディングを行います。
※コーティングができないWebデザイナも存在します。

Webデザイナの役割の変化

Webデザイナのやることを整理してみると至ってシンプルに思えますが、多種多様なWebデザイナがいます。

最近はWebデザイナの担当の幅が広がり、デザインだけでカバーできる課題の割合がどんどん減ってきており、何かのスキルとデザインをかけ合わせて、自身の価値を伸ばしているWebデザイナが増えている印象です。

タイプ別のWebデザイナ

ランディングベージ ✕ デザイン

広告などの媒体から誘導する商品専用ページをデザインする。
商品の価値などを正しく理解して、誘導したユーザーの悩みを解決させる情報を伝えれるデザイナ

グラフィック ✕ デザイン

Webのデザインだけでなく、紙媒体も扱えるデザイナ。
印刷物ありきのサービスでWebサイトも必要とされる案件だと広い視点で制作ができ効率的。

バナー ✕ デザイン

広告バナーを量産するデザイナ
ランディングベージに誘導するのが主な目的になります。

広告を扱うのでバナーですので作って終わりではなく、入稿と計測もデザイナ自身で行うことでより洗練されたバナーを作ります

コーディング ✕ デザイン

自分でデザインしたものをコーディングするデザイナ。
コーディングが自分でできるとコーディングの事を考えてデザインが出来るので運用フェーズに入ったときに効率的に更新が可能になります。

多くのWebデザイナがここの方になると思います。

プログラミング ✕ デザイン

CSSのコーディングだけでなくPHPなども触れるデザイナ。
システム系の案件でプログラマーと連携をして効率的な開発が出来る。

githubやgulpなどコードを触る事が得意なデザイナです。
WordPressを始めとしたCMSが人気ですので今こういった方も増えています。

ECショップ ✕ デザイン

ECショップの商品ページ作成のデザイナ
季節感や商品イメージなどビジュアル操作をする事が比較的多い。
多数の商品を理解する必要があるので、専属でデザインを担当する

解析 ✕ デザイン

Webサイトの目的となるコンバージョンをベースにデザインをするデザイナ。
運用のフェーズでは解析結果からPDCAを回していく。
デザインの良し悪しよりボトルネックを見つけて改善していく事が得意。

マーケティング ✕ デザイン

Webサイトの企画段階から関われるデザイナ。
クライアントから情報を引き出し、ペルソナを立てたりカスタマージャーニーを作って情報設計する。
デザインの良し悪しと言うより、ユーザーのターゲットと自社の強みを見つけ出す事が得意。

カメラ ✕ デザイン

メインビジュアルや商品写真など素材を自分で用意できるデザイナ
飲食店など現地に行って撮影する機会が多いので、比較的サービスやクライアントを理解する機会が多いので信頼関係を築きやすい。

動画 ✕ デザイン

撮影された、または自分で撮影した素材を元に迫力のある動画を作れるデザイナー。
メインビジュアルに比べると容量が多くなるなど懸念される部分はあるものの、動画は注目させやすく、伝えたいことを伝えたい順番で伝えることができるのでユーザーに伝わりづらいコンテンツの場合強力。

ライティング ✕ デザイン

文章構成能力の高いデザイナ。
ユーザーの心にすっと入ってくる言葉を書き出しデザインに落とし込む。

イラスト・マンガ ✕ デザイン

画力の高いデザイナ。
伝えたい内容を絵で伝え、印象に残る強いコンテンツが作れる。

Webデザイナの多様性

ざっと思いつくものでタイプ別のWebデザイナを上げてみました。
どのタイプも活躍の場があるものなのでどれが優れてるとかそういった事はありません。
ただデザインのスキルと何かを別のスキルをかけ合わせて、他と差別化しながらWebデザイナをしている人が多い印象です。

デザインはコミュニケーションと同じで「伝える事」と私は考えています。
伝える事がどれだけ上手くても、「誰に何を」伝えるかが曖昧であれば伝えることは難しいです。
デザインが出来るだけで人の心を動かすということはできないでしょう。
コミュニケーションも同じで同じ言葉を投げかけてもみんなが同じ感度で受け取ってくれる事はありませんので、「誰に何を」を伝える方法が多様化しており、それに合わせてWebデザイナも変化してきていると考えています。

こう書いてしまいますとデザイン不要のように聞こえてしまうかもしれませんが、キレイ・カッコイイだけ出来るデザイナは生きづらい世の中になってきたのかなとは思います。
デザインだけ出来るWebデザイナになりたい、またはそれで満足している人が多くいる違和感がありましたのでみんなが結果に繋げることができるWebデザイナになれたらいいなって思う次第です(*ゝω・*)

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

これからの始めるWebデザイナーにオススメ。脱Adobeという選択

この記事はSketch Advent Calendar 2016の15日目の記事になります。

皆さんAdobe製品は使ってますか?
私は使っていません(CCの契約はしているけど)。

理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。

私はSketchに出会う事でAdobe税から開放されました。
“これからの始めるWebデザイナーにオススメ。脱Adobeという選択” の続きを読む