2017年1月から4月までの振り返り

2017年1月から4月までの振り返り

もう1年も3分の1以上過ぎたので少し振り返り。

スキル系

作ったもの

読んだ本/オンラインで学習

新しく始めたcode系

  • Riot.js
    • RiotはWebデザイナでもわかるくらい簡単なのですがフロントエンド界隈では嫌われてるようで辛い。(フロントエンドは魔境)
  • Uikit3
    • Uikitは昔か使ってたけど、今年(2月くらいだっったかな?)に大型アップデート。
    • 中身がガラリと変わってモダンブラウザを切り捨てて汎用性が高まってて良い感じ。
  • netlify

    • 無料で手軽に使えるホスティングサービス。
    • SSLも無料でいける。
    • 私にとってはherokuの浮気相手。
    • 友人らとこんなブログしてる
  • UnderStrap

  • gitlabを使い出す
    • 無料でプライベートリポジトリも作れるし。チームでの活用もしやすい。
    • issueがgithubより項目が豊富で使いやすい

その他

勉強会

主催/登壇したもの

参加したもの

生活関連

  • ロードバイクを買った

  • 初めて確定申告した

    • 最初は手間取ったけど、今年はちゃんと準備してるから大丈夫
  • InVitionに課金した

    • InVitionが便利過ぎて手放せないのでようやく課金開始
  • FontPlusを使い始めた

    • Zenlogicさんのキャンペーンで無料で使えてる。嬉しい。
  • Webデザイナの就職支援向けのグループを作った。

  • 友人らと男木島に旅行してきた。

  • ライブのために北海道遠征してきた。

  • 太った

    • 辛い

最後に

一年の最後に振り返ると、なかなか起動修正もできないので4ヶ月くらいのペースで振り返りたいなーと思った所存です。

たいして時間のかかる事でもないので、続けていきたい。

もし、ここに記載しているもので「私も始めました!」的なものがかぶってたらその話題で盛り上がりたいものです。お声がけください(ゝω・)

WordPressのカスタマイズしやすいのスターターテーマ Understrap

みなさんはWordPressの案件をするときはどんな開発フローをされてますか?
1から作るひともいれば、何かフレームワーク的なものを入れて作る人、スターターテーマを使って作る人、子テーマ前提で作る人など様々な進め方がありますね。

私は去年までは「Underscores」を使って開発していましたが、最近WordPressの開発では、UnderStrapというテーマを使っています。
UnderStrap公式サイト

UnderStrapとは

UnderStrapは、WordPressの開発元となるAutomatticのUnderscoresのスターターテーマと、レスポンシブにも対応しているBootstrap4を組み合わせたものです。

WordPress.orgの公式テーマディレクトリに掲載されており、管理画面からもダウンロードできます。

スターターテーマは開発を始めるときの手間を減らしてくれる便利なものです。
Underscoresは長年愛され・実績も信頼もスターターテーマで、とても使いやすいです。
ただUnderscores単品で使うことは少なく、何かのフレームワークと組み合わせて作る事が多かったです。

Underscoresを使えばBootstrap4で最適化された最低限の構成で制作を始められるので瞬発力が高まります。

便利なポイント

UnderscoresとBootstrapを使ったテーマは数多くありますが、なぜ私がUnderStrapが良いと思えたかを紹介します。

子テーマで作れる設計

UnderStrapは子テーマで制作できるので、メンテナンスがし易いです。
関数の部分であったり、オプションが幾つか設定されており、子テーマからレイアウトなどの設定を変更することが可能です。

子テーマを使うと親テーマのレイアウトや構成をそのまま持ってこないと行けないとよく誤解されますが、UnderStrapではそんな事はありません。

そして、UnderStrapでは子テーマ用のテーマも配布されています。
ただ子テーマが用意されているわけではなくUnderStrapの子テーマとして用意されているので特に構成を考えずに使いはじめれます。

子テーマではタスクランナー(gulp)やSCSSが入っていますので効率的に開発が始められます。

他にも子テーマ前提へBootstrapを組み込んで作られているテーマですと日本語のものだと、Habakiriが有名です。
私も何度かお世話になりました。

機能面の豊富さ

Bootstrapを取り込んでいるのでUnderscoresにはないオプションや機能が標準からあります。

オプションパネル

WordPressのカスタマイズパネルからCSSのカスタムコードを追加できます。
またレイアウトの変更も可能です。

Awesomeが入ってる

Bootstrapがあるので当然と言われそうですが、はじめからAwesomeが入っているのでちょっとした装飾やアイコンがほしいときにすぐに使えます。

Jetpackの対応

Underscoresを使っているので、Jetpackのテーマサポートが付属しています。
※妙なスタイルや設定はありませんので、Jetpackを使わずにUnderStrapの​​ままでも使えます。

WooCommerceサポート

去年あたりからよく話題になっているWooCommerceプラグインにもテーマ側で対応しています。
まだWooCommerceに対応したテーマを作ったことない方はcodeを読むだけでも気づきがあるかもしれません。

オープンソース

先に少し触れてしまいましたがUnderStrapはWordPress.orgの公式テーマディレクトリで配布されている安全と品質を保証されたテーマです。

もちろんライセンスはGPLでUnderStrapは、個人用、商用利用も無料です。

まとめ

WordPressの案件はスピード感を期待される事が多いのでこういった使いやすいスターターテーマを使わない手はないですね。

シンプルな設計なので、codeを読むだけでも勉強になります。

UnderStrap公式サイト

勉強になるといえばあと一ヶ月もすればWordCamp Kyoto 2017ですね。

WordCamp Kyoto 2017

また当日のプログラムが公開されたないのでどんな内容なのかわかりませんが楽しみですね。
(ポスターもまだ見たことないです。)
(すでに200人近く参加登録されているようです。)

私も当日行く予定(LTできる事が決まれば参加)ですので、もしこんなテーマも便利ですよとかあれば教えてください(ゝω・)

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

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

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

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

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

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

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

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

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

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

サンプルページ

AOSとは

AOSはAnimate On Scroll Libraryの略です。

公式サイト
github
公式デモサイト

AOSで出来ること

要素を表示させるアニメーションは「Fade」「Flip」「slide」「Zoom」の4種類が用意されています。

これらにタイミングや速度、上下左右の位置、回転の方向を指定できるのでかかなり自由度が高いです。

jQuery不要で動くのですでにコーディング済みのページに依存せずにお手軽に追加できます。

使い方

下記の手順で読込と設定は完了です。

  1. 配布されているJSファイルとCSSファイルの2つを読み込み
  2. JSの実行
  3. 特定の要素に『data-aos』属性を指定する

読み込み方法

githubからでもDownloadできますが、CDNでも配布されていますのでそちらを使うのをオススメします。

<!--「aos」CSSの読込-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">

<!--「aos」JSの読込-->
<script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>

実行方法

さらにJSファイルを読み込んだ直後に<script>AOS.init();</script>と記述してAOSを機能させます。

オプションを設定することも可能です。
ここで設定全体共通の設定をしておくと個別にアニメーションスピードを調整する手間が省けます。

<script>
  AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-in-sine',
    delay: 100,
  });
 </script>

さらにAOSでは実行を無効化する端末もオプションで選べます。
これはスマホ版ではアニメーションさせたくないなどのときには便利です。
設定は3つのパターン(mobile(phone & tablet)、phone、tabletの3種類)で選べます。

<script>
  AOS.init({
    disable: 'mobile'
  });
</script>

端末だけではなく、画像の幅でも設定可能です。

<script>
  AOS.init({
    disable: window.innerWidth < 1024
  });
</script>

エフェクトのマークアップ

例えば「フェード・イン」しながら表示させたい場合は次のように記述します。

<div data-aos="fade-in">アニメーションさせたいコンテンツ</div>
何をしているかというとHTMLタグにカスタム属性であるdata-aosを設定しています。
これだけで設定完了です。

もちろんフェードイン以外にも様々なエフェクトが設定できます。
指定できるエフェクトは以下のとおりです。

フェード関連の設定

  • Fade animations
  • fade-in
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

回転関連の設定

  • flip-up
  • flip-down
  • flip-left
  • flip-right

スライド関連の設定

  • slide-up
  • slide-down
  • slide-left
  • slide-right

ズーム関連の設定

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

その他の設定

AOSではアニメーション以外にも、要素を表示させるタイミングや動かす距離、アンカーポイント、アニメーションの回数など、各種オプションも指定できます。

これらもアニメーション同様にカスタムデータ属性で指定するだけです。

  • data-aos-offset
  • data-aos-duration
  • data-aos-easing
  • data-aos-delay
  • data-aos-anchor
  • data-aos-anchor-placement
  • data-aos-once

参考

複数指定する場合は以下のようになります。

<div data-aos="fade-in" data-aos-easing="ease-in-sine" data-aos-once="true">アニメーションさせたいコンテンツ</div>

詳しくはGitHubで紹介されていますのでご確認ください。

コーディングが苦手な初心者WebデザイナーにオススメのCSS勉強の方法

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

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

概念的なものを知る

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

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

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

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

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

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

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

基本の勉強

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

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

ドットインストール

progate

やってはいけない学習法

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

丸暗記する

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

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

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

ノートに書いて覚える

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

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

全て覚えようとする

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

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

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

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

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

CSSの模写の方法

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

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

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

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

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

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

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

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

レイアウトを探す方法

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

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

まとめ

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

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

concrete5でテーマを初めて作るときに参考になるテーマ(package)

初めて/packages/の中で動くconcrete5でテーマ(package)を作ろうとしたのですが私は苦戦していました。

ベースにできるテーマが無いかなーと思ったら、concrete5にデフォルトでインストールされているElementalの上書き用(カスタマイズ用)のpackageがあるのを見つけましたので紹介します。

“concrete5でテーマを初めて作るときに参考になるテーマ(package)”の続きを読む

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

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

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

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

Noto Serif CJKのデモ

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