2018-11-25

駆け出しのWebデザイナーが FRONTEND CONFERENCE 2018 に参加してきた話

f:id:yonetggp:20181125192152j:plain

フロントエンド製作者向けのイベントでは最大級の催し、FRONTEND CONFERENCE 2018 が2018/11/24に開催されました。フロントエンドを日々勉強中の自分にとっては目から鱗の内容ばかりで参加して本当に良かったです。

FRONTEND CONFERENCEってどんなの？

今年初めて参加したのでこれまでの流れはわからないですが、主なイベントセッションの構成はフロントエンドに関わる最新技術やデザインのTips、思考についてになります。セッション形式で聞きたい内容を自由に選択していくことができます。ゲリラ登壇など、当日LT参加といったパターンもありさすがエンジニアのカンファレンスだなと感じました。

セッション一覧

Rust+WebAssemblyで広がるWebの世界
Webデザインに本当に必要だったものを考える 2018年版
タイポグラフィ・ベーシック
業務システムに使えるPWA
理想のデザインプロセスについて考える
Chrome Dev Summit Recap
デザイナ主導のプロトタイプ開発のススメ方
Web Musicでは何ができるのか
WEBアプリを作らない選択肢
綾なす CSS アニメーション
10名超えのスクラムでフロントエンド開発する現場の声
フロントエンドで作る理由
デザインをいつみせるか、どう伝えるか

2018.kfug.jp

面白そうな題名ばかりですが、セッション毎に場所が違ったり、同時進行されたりとしているので残念ながら全てのセッションに参加することはできませんでした。ここでは私が特に興味を持ったセッション内容について少しだけ共有したいと思います。

WEBアプリを作らない選択肢

Webアプリを作らないと言うよりかは、「Webアプリを１から作成しない」という内容でした。
工数や環境構築の手前をGASの利用で解消できると言うことで、事例を交えて共有いただきました。GASを使えばトリガーを設定し、楽天のランキングを自動取得できたり、商品管理を一括で操作することができるそうです。GASは基本JSで記述することができる為、学習コストを低く抑えられるということも魅力でした。
（事例）楽天ランキング調査システム、楽天商品管理システム

なぜプロトタイプを作るのか

「お金と時間がない時にこそプロトタイプが必要」という部分が特に印象的でした。プロトタイプを作るメリットと導入すべき基準を明確にされていて発表内容がすごく腑に落ちました。
私自身、これまでに業務の中でいくつかプロトタイプを作ってきましたが「やめる選択肢をクライアントに与えてあげる役割もある」という考え方は自分の中になかったのでハッとさせられました。

今日話すスライドです。「デザイナ主導のプロトタイプ開発のススメ方」https://t.co/bvSznsmi0j #frontkansai
— コンチ (@maki_saki) 2018年11月24日

綾なすCSSアニメーション

ライブコーディングも交えてCSS アニメーションをどのように使えば効果的な表現ができるかなどを共有いただきました。
また、CSS アニメーションで対応できない箇所をどのようなJSのライブラリを使えば良いかなども教えていただき非常に勉強になりました。

transition - CSS: カスケーディングスタイルシート | MDN

Googleも推奨！アニメーションライブラリTweenMaxの使い方入門編 | un-Tech

本格的なタイムラインアニメが作れる最強ライブラリーTimelineMaxの使い方 - WPJ

理想のデザインプロセスを考える

EC-CUBE4管理画面のデザインプロセスをどのように設定したかや実際に開発に関わった中での気付きを共有いただきました。
各コンポーネントのデザインまで実際の資料を細かく解説いただいてすごく参考になりました。
特に、EC-CUBEはオープンソースでユーザーからのフィードバックにも瞬時に対応できるよう「リーンスタートアップ」の思考方法を取り入れたというところが印象的でした。

今日お話するスライドです。 #frontkansai https://t.co/8Jc1pad5AY
— 深沢幸治郎@11/24 FRONTEND CONFERENCE 2018 at Osaka (@kojirofukazawa) 2018年11月24日

フロントエンドで作る理由

SPAでの制作を中心に新たなフロントエンド技術をどのように現場へ導入すればいいかについてこれまでの知見を元に共有いただきました。変化の激しいフロント界隈でもどこまで情報をキャッチアップすべきかそして、技術の安定期に入りつつある今どのようなステップで学習、導入すべきかについて知ることができました。「制作方法が変われば、ディレクション方法、見積もりのとり方まで変わってくる」というのが非常に印象的でした。

FRONTEND CONFERENCE 2018https://t.co/BN01MkdQIS

本日の登壇資料です。#frontkansai
— mikakane (@_mikakane) 2018年11月24日

参加した感想

私自身、まだまだフロントを勉強中ですが最新の技術だけでなく現場でどのように取り入れていくべきかや制作工程、思考方法を知れたことが何よりも良かったです。関西フロントエンドUGとして定期的に勉強会を行ってもいるそうなのでぜひ参加してみたいと思いました。

2018-11-18

アコーディオンメニューをHTMLとCSSで実装する方法

f:id:yonetggp:20181118171500j:plain

アコーディオンメニューはWeb制作をする上で良く利用される表現です。

メニューの展開などの動きを付与するにはこれまで jQueryなどで表現することが一般的かと思われます。ただ、簡単なあしらいであればHTMLとCSSのみで実装することが可能です。

details, summary タグ
open属性によるメニューの展開
アニメーションの付与

details, summary タグ

使い方は簡単でアコーディオンを設定したい箇所をdetailsタグで囲み、展開させる前に表示させたい項目をsummaryタグで囲むだけです。

<details>
  <summary>What's HTML Accordion?</summary>
  You can make Accordion menue with only HTML.
</details>

これだけで基本的なアコーディオンの機能は成立します。

open属性によるメニューの展開

任意のメニュー項目を予め展開させておきたい場合はopen属性をdetailsタグに付与します。CSSを適用する際には "details[open]" の形で指定します。

<details open>
  <summary>Opened Menue</summary>
  You just need to add "open" attribute.
</details>

アニメーションの付与

展開時にアニメーションを付与したい場合はCSSで "transition" プロパティを指定します。

details {
  transition: .7s;
}

以上でHTML, CSSのみでアコーディオンを実装できました。対応ブラウザーが少し弱いところもあるようですが、スクリプトで補填できるようです。

codepen.io f:id:yonetggp:20181118171500j:plain

2018-09-25

ヘッダーや要素の固定（CSS）

Webサイトの制作をしていると「ヘッダーを固定したい」であったり特定の要素を画面上へ固定したいといった要望がありますよね。

今回は初歩的な方法でCSSによる要素の固定方法を紹介したいと思います。

まずはサンプルの完成形がこちらになります。

f:id:yonetggp:20180925005640p:plain

サンプルとしてダミーのヘッダーとコンテンツを簡単に用意してみました。
HTMLのサンプルは以下になります。

<div class="wrapper">
    <header class="header">
      <div class="header-bk">
        <h1>Header Fixed</h1>
        <nav cladd="header-nav">
          <ul class="header-nav_list">
            <li class="header-nav_item">test01</li>
            <li class="header-nav_item">test02</li>
            <li class="header-nav_item">test03</li>
          </ul>
        </nav>
      </div>
    </header>
    
    <div class="contents">
      <div class="articles">
        <article>
          <div class="article-text">
          Lorem Ipsum is simply dummy text of the printing and typesetting      industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>     
        </article>

       <!-- 以下省略 -->

      </div>
    </div>
  </div>

次にCSSファイルを準備するのですが、今回ヘッダーを固定する際に必要なプロパティは以下になります。

position: relative;
position: fixed;
top: 0;
left: 0;
z-index: 1 (任意の数値);

まずヘッダーを固定させる為に position を利用して全体の親要素（今回では .wrapper）に相対値を指定します。

.wrapper {
  position: relative;
  width: 100%;
}

次に固定させたい要素（今回は headerタグで囲まれた部分）に position: fixed; を指定します。
position: fixed; は今回のような特定要素を固定したい場合に使うことができます。

top, left は固定させたい位置を指定することができます。
ここでは画面上部に固定させたいので、それぞれの値を '0' にしています。

positionを使った場合、重なり順（どの要素を全面に出すか等）の問題が出てくるので、z-index で最前面にくるよう任意の数値を指定しましょう。

.header {
  widh: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

以上で簡単に要素の固定を実装することができました。さらに細かい調整を加えたい場合は js で記述する必要が出てきますが、単純に要素固定させておきたい場合などは以上で事足りるかと思います。
途中出てきた position, top, left についてよくわからないという方は「おすすめ参照」を貼っていますのでぜひ参考にしてみてください。

サンプル：Header Fixed
codepen.io

2018-05-21

初心者でもできるGulpの構築

f:id:yonetggp:20180521000850j:plain

Webの業界で働いているとタスクランナーと言う言葉を耳にすることも多いはず。

タスクランナーとはWeb制作で行う処理をタスクとして自動化させるツールのことを言います。

コーディングが苦手と言う方も Gulp(ガルプ) や Grunt(グラント) といったワードを一度は聞いたことがあるのでは！？

今回は上述したタスクランナーの一つであるGulp(ガルプ)について書いて行きたいと思います。

gulpとは

gulpとはNode.jsをベースとしたビルドシステムのこと。

いきなりノードJS、ビルド！？といった難しい言葉が出てきましたね。www

要するにNodeというJavascriptを使って処理を自動化させるツールと言うこと。

ざっくりしたイメージですが深追いせず行きましょう。

大切なのはgulpで何ができるのかと言うことです。

gulpでできること

画像の圧縮
Sassのコンパイル
css, jsの文法チェック
スタイルガイドの自動生成

と様々な用途で使えるパッケージが豊富に用意されています。

gulpを使う手順

Node.jsのインストール
package.jsonの利用
gulpのインストール

1. Node.jsのインストール

1. のNode.jsをインストールする方法は公式サイトに詳しく書いてあるのでご確認を！

Node.js

ただ、複数人でプロジェクトを進める場合なのどでNode.jsのバージョンを合わせないといけない時があるのでndenv, nodebrew, nvmといったバージョンマネージャーを利用した方が良さげです。ここでは小難しくなるので割愛します。コマンドライン（黒い画面）でインストールする方法ですお時間あるときにチャレンジしてみてください。

2. package.jsonの利用

パッケージの情報を合わせるためにpackage.jsonという必要な情報をまとめたファイルを作成します。

コマンドライン（黒い画面）を開いて以下のコマンド実行

npm init -y

インストールしたファイルの中身を見るとpackage.jsonというファイルが入っているはずです。

3. gulpのインストール

以下のコマンドでgulpをインストールできます。

npm install --save-dev gulp

これで一通りの作業は終了です。あとはgulpを使ってどのような処理を行いたいかをgulp.jsに記述していきます。( gulp.jsは作業ディレクトリに自分で作成します。)

var gulp = require('gulp');
gulp.task('default', function(){
//必要なタスクを記述
});

あとは初めの方に書いたgulpでできることにあった内容で実行したい処理を「//必要なタスクを記述」に追加していくのです。ここからが実際は本番って感じなのですが、gulpを使うまでの準備が今回のテーマなのでここまでにしておきます。

自分もまだまだ勉強中ですが、うまく使えば作業効率が格段に上がるはずなのでぜひ挑戦してみてください。

2018-01-28

「Webデザイントレンド in 大阪 2018」に行ってきた感想

関西で最大級のWebデザインセミナーらしい「Webデザイントレンド in 大阪 2018」に行ってきたので感想をここに書いておこうかと思います。

2018/1/27（土）に第34回リクリセミナー「Webデザイントレンド in 大阪 2018」を開催します-Re:Creator's Kansai （リクリ）

私のようなWeb業界新参者にとってどれだけ凄いイベントなのか行ってみるまで実感できなかったのですが、周りの先輩方が絶対行くべきだとオススメされたので思い切って参加してきました。

この思い切ってというところがポイントなのですが、参加費が安くできて¥5,000〜と若干お高目です。

ただ、参加した率直な感想として行ってみて本当に良かったです！

このセミナーは毎年絶対行きたいと思いました。

実際にどんな内容のセミナーだったのか自分なりにまとめてみたので興味がある方は続けて読んでやってくださいな。

（＊あくまで私が感じ取ったことなので間違っていたらごめんなさい）

どんな内容だったの？

4時間ほどの長時間セミナーだったので全て書き留めるのは難しいので特に印象に残った内容を書いて行こうと思います。

全体的な内容はWebデザインのトレンドを第一線で活躍するクリエイターの方々が詳しく解説したり参加者と一緒に考察していくといったものでした。

デザインを育てる

「デザインというのは一度作って終わりではなく育てていくもの。」

時代の流れと共にデザインされた制作物も人々に与える印象やその役目が変わって行くべきでその経過も想定してデザイナーは制作することが大事。

例に出されていてなるほどと思ったのが非常口のマークです。

昔はマークが大きく、「非常口、EXIT」と行った言葉も添えられていました。

しかし最近のものは小さく言葉を添えられていません。それは人々がそのデザインの示す意味を理解し、より簡略化できるようになったからです。

Webデザイナーは運用が得意！？

Web業界の仕事というのはPDCAサイクルを回す周期が短いという特徴を持っています。それは制作してからユーザーの元に届き、反応が帰って来るまでのスパン（期間）が短いという性質に起因するのでしょう。

kigyotv.jp

PDCAを普段回す回数が多いということはデザイン面でもそこが武器になるはずということでした。

また運用面で大事なポイントは「コンテンツに感性を乗せること」だというのも非常に印象的でした。感性を乗せるからこそ注目を引くことができるし、影響力ある作品が作れるんでしょうね。

デザイナーなら自分もデザインすべき

先程のコンテンツに感性を乗せるという部分にもつながるのですが、自分にも感性を乗せることが大事なんだよというものです。

これはつまり自分（デザイナー）は一体何者なのかを理解し、それに合わせて自身のキャラを立てていくということです。

「OOさんと言えばOOだよね」といって貰えるようにするとデザインだけでなくその他仕事の運用も上手く回せるようになるんですね。

フォントはUIにも関わりがある

基本的なことかもしれないですが、使うフォントによってユーザーに与える印象は大きく変わりますよね。例えば鱗のある明朝体などは凹凸感があり、長い文を読ませるのに適しているといったことです。

日本語のWebフォントは重たい印象があったのですが、改良が繰り返されかなりライトに使えるのだとか。また縦書き文化というのも現在世界で使われているのは日本と台湾くらいだそうです。これは驚き！最近は縦書きサイトも増えてきているので実務でももっと使って独自性のあるサイトを作ってみたいですね。

国によってデザインに特徴がある

日本だけでなく他の国ではどんなデザインが流行ってるのかというのもそれぞれお国柄が反映されていて面白かったです。最近オリンピックが開催された国が特に盛り上がっっているというのも凄く興味深かったですね。

自治体のWebサイト

自治体のWebサイトは参考になる部分が多いんですね。自治体サイトには工夫されている箇所が多くそれはコーポレートサイトなど他の分野でも応用できるとこがたくさんあるのだと気づかされました。

ざっと振り返りも兼ねて書いてみたのですが、如何でしたでしょうか？

実際に参加していないと伝わりづらいところもあったかと思いますが、まだ参加したことがないというWeb屋さんには是非オススメしたいです。

2018-01-22

駆け出しのWebデザイナーがLTやってみた

f:id:yonetggp:20180121230101j:plain

制作側の人間にプレゼン力は必要！？

みなさんは普段人前で発表したり話をする機会ってありますか？

私は普段Webデザイナーとして働いているのですが、社内で打ち合わせするときに軽く内容をまとめてから話すくらいで中々プレゼンをする機会がありません。

大体はディレクターという人がその役目をしてくれることが多いかと思います。

自分の場合は業務形態がインハウスなので発表する機会がどうしても社内止まりになってしまってます、、、、、。

じゃあデザイナー、ディベロッパーといった制作側の人間は人前で話す力は必要ないのかというとそんなことはありません。

昨今のWeb業界では分業制を敷いているところが多くデザイナー、コーダー、プログラマーといったポジションの人間がお互いに意見をぶつけ合う機会がたくさんあります。

確かにプレゼンという形で意見を伝えることは少なかもしれません。

ただ、自分の意見を立場の違う人に正しく伝える行為自体はとっても重要なのです。

クリエイターもプレゼン力を高める必要がわかったところで、どうすれば発表する力をつけることができるのでしょうか？

f:id:yonetggp:20180121233246j:plain

それは兎にも角にも挑戦あるのみだと思います。アウトプットが先行されるアクションの多いプレゼンはこれに尽きるのではないでしょうか。

ただ、「そうは言っても何かを大勢の前で話すネタがないよ、、、」と思う方もいるかもしれません。そんな時は参加のハードルが低いLTにチャレンジしてみましょう。

LTって何？

LTとはライトニングトークの略で５分程に伝えたいことをまとめて発表するプレゼンのことです。

employment.en-japan.com

LTはIT界隈の勉強会ではよく催されていたりするのでおすすめです。なんと言っても発表時間がスゴく短いのでそこまでプレッシャーも感じれずに済むのがいいところ。

私も駆け出しのWebデザイナーなので今回初めてLTに挑戦してきました。

内容はAdobe XD関してで自分が実際に取り組んだ内容をお話しました。

初めは正直不安でしたが、実際やってみてとても勉強になりました。

LTをしてみてよかったこと

無駄なく要点をかいつまんで話す力がつく
人前で話すことで自信がつく
色々な人に自分のことを知ってもらえる

人前で話すことに苦手意識を持っている方は是非勇気を出して一歩踏み出してみましょう！意外と終わった後の達成感がクセになるかもしれませんよ。（笑）

Mile Stones

駆け出しのWebデザイナーが知って得した情報を紹介します。