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

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

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

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

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

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

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

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

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

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

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 > スキルアップ・ノウハウ

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 > スキルアップ・ノウハウ

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

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

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

イベント参加者の反応

最後に

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

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