Cntlog > Articles by: conti

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

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

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

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

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

Cntlog > Articles by: conti

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 > Articles by: conti

Webデザイナーになりたい人にオススメするパソコンの性能での買い方

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

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

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

Cntlog > Articles by: conti

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

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

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

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

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

Cntlog > Articles by: conti

現役Webデザイナーが教える派遣Webデザイナーの働き方

Webデザイナーにも色々な働き方があって、正社員、フリーランスに限らず派遣社員を選ぶ人たちも増えていっています。

実際Webデザイナーで派遣で働いてる友人も多く、正社員の頃に比べ時間の融通が効くようになったりして満足いています。

この記事では、Webデザイナーの派遣ってどんな感じなのかを紹介したいと思います。
“現役Webデザイナーが教える派遣Webデザイナーの働き方” の続きを読む

Cntlog > Articles by: conti

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

package.jsonを作る

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

npm init -y

packageのインストール方法

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

npm i -D (package名)

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

Cntlog > Articles by: conti

Webデザイナーを辞めたいと思う人へのアドバイス

私IT業界で働き続けてもう10年以上になりますがwebデザイナーを辞めたくなった事はあります。
ただ私は今もWebデザイナーを続けていますし、続けていてよかったと思えています。

もちろん、Webデザイナーに向いていない人、続けるのが難しい人もいますので悩んでる人の参考になれば。

“Webデザイナーを辞めたいと思う人へのアドバイス” の続きを読む

Cntlog > Articles by: conti

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

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

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

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

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

Cntlog > Articles by: conti

採用担当が教えるWebデザイナーの面接の対策とよくある質問

Webデザイナーに初めてなる方も中途採用の人も面接って苦手ですよね…。

私は自分が採用担当になってからはそんなに緊張はしなかったのですが、それまでは結構苦労していました。

この記事では、私がWebデザイナーの採用担当になって見ていたポイントやこんな質問をする、自分が転職するときはこうしてきたみたいな内容をご紹介します。

“採用担当が教えるWebデザイナーの面接の対策とよくある質問” の続きを読む