Cntlog

初心者がWebデザインスキルを上げるための模写・トレースの方法

よくWebデザイナーになりたいけど、「デザインの何から勉強していいかわからない」という相談を受けます。

そんなときに私がオススメしてる方法はすでにあるデザインの模写になります。

この記事では模写の始め方からどうやって模写からスキルアップをしていくかをご紹介します。

“初心者がWebデザインスキルを上げるための模写・トレースの方法” の続きを読む

Cntlog

マイクロインタラクションを導入するために考えること

UIをリッチに見せる方法として近年アニメーションを使われる事が多く、ユーザーが操作した感覚を印象ずけたりUIの理解を深めるのに近年マイクロインタラクションが注目されています。

この記事ではマイクロインタラクションを導入するために抑えておくポイントを紹介します。
“マイクロインタラクションを導入するために考えること” の続きを読む

Cntlog

2019年に独学でWebデザイナーになった方に本音のインタビューをしました

これまでいくつかWebデザイナーになりたい方向けにブログの記事を書いてきましたがこの度私の記事を見て、それを実践されてWebデザイナーになったと連絡頂いた方がいます。
元々グラフィックデザイナーをされていた方で、2019年の2月に初めてWebデザイナーになったサツキ(仮名)さんです。

今回、独学でどのようにWebデザイナーになったのかをインタビューをしてきました。

内定をとって就職をされたのですが、残念ながら、ブラックな企業に巡り合ってしまったようで初出社してから数日で、すでに退職を予定されています…。

この記事では、サツキさんへのインタビューを通じて、独学でどのように勉強をしていったか、Webデザイナーとして就職するまでの流れ、ブラック企業に取り込まれない方法、今Webデザイナーになって気になっていることなどをご紹介します。

“2019年に独学でWebデザイナーになった方に本音のインタビューをしました” の続きを読む

Cntlog

【jQuery不要】スクロールで画面内・外の要素を制御するJSライブラリ in-view.js

ページスクロールをして、特定の要素がウインドウ内で表示されたタイミングを検知してアニメーションをさせたり、classをつけるといった要望はよくありますね。

以前はjquery.inviewを使っていたのですが、jQueryに依存(1系に)してることもあって、使えるシーンがすくなっていました。

そこで、jQueryに依存しないライブラリで、画面内の要素検知ができるものがあったので紹介します。

in-view

in-view.jsはすべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。

in-viewのinstall

npmでinstallする方法とダウンロードしたものを読み込む2パターンがあります。

npm install --save in-view

公式サイトには書いてなかったのですが、CDN版もありました。

<script src="https://cdn.jsdelivr.net/npm/in-view@0.6.1/dist/in-view.min.js"></script>

使い方

使い方はシンプルで対象となる要素を指定し、ビューポートに入った時(enter)と出る時(exit)にエフェクトを記述します。

inView('.someSelector')
    .on('enter', doSomething)
    .on('exit', el => {
        el.style.opacity = 0.5;
    });

一度しか適応したくない場合は.onではなく.onceを使います。

inView('.someSelector').once('enter', doSomething);

画面内にいるかどうかの判定もできますのでif文でなにかするとかも可能です。

inView.is(document.querySelector('.someSelector'));// => true

どのくらい入り込んでると、画面内に入ったかをチェックもできます。

inView.offset(100);
inView.offset(-50);

デモ

Cntlog

WordPressのスキルでWebデザイナーが学べる事

WordPressといえば、今やWebデザイナに限らず、ブロガーなど、Web業界にいないユーザーでも知っているほど有名なCMSです。

WordPressは企業のコーポレートサイトなどにも利用されておりブログ以外の制作でも需要があるため制作会社でもそのスキルは求められます。

WordPressが日本で流行り始めたのは2012年頃かなと思いますが、その頃からWordPressを勉強し始めて良かった実体験をご紹介します。

“WordPressのスキルでWebデザイナーが学べる事” の続きを読む

Cntlog

VueやNuxt.jsでよく利用しているライブラリ

Nuxt.jsめちゃくちゃ便利なのですが、使うならNuxtやVueに特化して作られたもののほうが、トラブルも少なくて積極的にそっち系のライブラリを選んで利用しています。

この記事で私がよく使っているライブラリを紹介します。

UIライブラリ

buefy

buefybulmaをNuxt用に作られたUIフレームワークです。

WebアプリやWebサービスで使いやすいUIがたくさん揃っています。

buefy

vuetify

vuetifyはGoogleが設計しているMaterial Designベースで作られているUIフレームワークです。

使うとめちゃくちゃGoogleっぽくなります。
UIComponentの数がとても豊富にあります。

個人的には管理画面などシステマチックな案件のときによく使います。

vuetify

scroll系ライブラリ

vue-scrollto

nuxt-linkなどをクリックしてページ内scrollをいい感じにアニメーションで動作させてくれるライブラリ。

特徴としては、下記になります。

  • 設定が簡単
  • オプションが便利
  • SSR対応済み

nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。

デモ

vue-scrollto

vue2-scrollspy

vue2-scrollspyh1h2などのHeddingに合わせてナビゲーションにclassをつけるものです。

LPなど縦長のページやブログサイトで利用します。

デモ

vue2-scrollspy

画面固定系ライブラリ

vue-sticky-directive

vue-sticky-directiveはスクロールして特定のどこかで指定したブロックを画面固定するやつです。

固定時の判定がされたときに専用のclassが着いたりするのでCSSでもいい感じにしやすいです。

選定のときにvue-stickyも合ったのですが、なぜか私が使ったときは動かなかったので、vue-sticky-directiveを使うようにしています。

デモ

vue-sticky-directive

Cntlog

これからWebデザイナーになりたい人にオススメするパソコンの性能の見方

Webデザイナーになりたいと言う人から結構パソコンのスペックをどうしたらよいかという相談を受けます。

確かに私もスペックとかわからずにいてて、作業しだしてから「重い…もっと良いスペックがほしい…」と言ってた思い出があります。つらい。。。

この記事では、Webデザイナーになる方が初めてどんなパソコンを購入すれば良いかをご紹介します。
“これからWebデザイナーになりたい人にオススメするパソコンの性能の見方” の続きを読む

Cntlog

無料で使えるCSSで簡単に使える便利なアイコンフォント集

アイコンフォントといえば、fontawesome一択みたいな運域はありますが、最近は別のものでも結構便利なアイコンフォントが合ったりします。

個人的にはfontawesome好きなんですが、矢印(chevron-right)とかが自分のデザインに合わなくてもやもやもやもやしていました。

いくつか気に入ってる、簡単に使えるアイコンフォントをご紹介します。

“無料で使えるCSSで簡単に使える便利なアイコンフォント集” の続きを読む