2016年12月11日初めてブロガーのイベントに参加してきました。
私はブログは持っています(このブログ)が、自分ブロガーとは思ってませんが、ブロガーさんがどのようにWEBを活用してるかが気になって参加してきました。

イベントの詳細はこちらです
【増席】12月10日 大阪にてkeitaとあんちゃがブログ運営の秘密を暴露します(・ω・)ノ
Continue reading “ブログ初心者がブロガーのイベントで学んだこと”

Mautic Advent Calendar 2016 の5日目を担当記事です。

本記事ではオープンソース唯一のマーケティングオートメーションツール 「Mautic」とのWebデザイナーとしての付き合い方の私なりに思う紹介をします。
Continue reading “マーケティングオートメーション「Mautic」とWebデザイナーの初めての付き合い方”

TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。
そのCSSは「font-feature-settings」というものです。

詳しい事は下記記事よりご確認ください。

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング
Continue reading “【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた”

カテゴリー: css

LT Advent Calendar第1弾12/1の記事です。
今年はLT芸人と言われる1年でした。
自分でも数ヶ月連続でやっていたり、勉強会に参加したらいつもLTしてるとか、LTするために勉強会に参加してるとか色々言われた一年でした。
LT楽しいです。

LT(ライトニングトーク)とは

あまりガチガチのルールは無いと思っているのですが、だいたいは5分という制限の中で発表をするものです。
テーマはその時々によって変わるのですが、よくあるのが「課題解決型」、「ネタ型」、「最近の報告型」ととかあたりが多いですね。
私はネタ系のLTが多いです。

今年発表したスライド

整理してみると思ってたより少ない。
来年はもっとやる。

なぜLTをするのか

なぜLTをするのかと聞かれたら、私はそこに壁と聴衆がいるからと答えしかないのですが、その境地にまで達するまでにLTの楽しさを知ったのが大きな理由になります。

LTをすると良くも悪くも注目をされます。
その注目を嫌と思う人もいるでしょうが私はそれが必要でしたのLTを続けることができました。

最初の動機は声をかけてもらう事にありました。

私は知らない人に声をかけるのが苦手です。
そのせいか懇親会では誰にも声をかけれずにぼっちしてる事が多いです。

でもLTをすると知らない人から声をかけてくれるのでものすごく楽になります。
LTをするだけでぼっちにならなくなるんです。コミュ障としてはやらざるを得ないです。
※ぼっち力が高いとそれでも懇親会ぼっちになります。

またLTをするとその場にいる色々な人から意見をもらえます。
ブログに書いても反応はもらえたりするのですが、やはりその場にいる人のほうがコミュニケーションを取りやすく良いインプットが得られます。

LTはすることは良いこと尽くめです。

LTで心がけてること

私がLTをするときは場を盛り上げて記憶に残るLTをする事に注力しています。

私は硬い話をしてもなかなか上手く伝えれないので、笑いをとりつつ勢いをもって話すようにしています。
そうする事で印象と記憶に残り私が目標とする良いLTが出来上がります。

「悔しいけど、わかりやすい」「あなたの後はLTやりにくい」「今日一番面白かったです!」
言ってもらって嬉しい言葉はこのあたりですね。

LTのはじめ方

私の周りを見るとLTや登壇をする人は非常少ないです。
もっと色んな人がやればいいのにと思うのですが、なかなか始める人はいません。悲しい。

みんなLTに対して異様なハードルを思ってると思うので、とりあえずみんな一度初めたら良いと思います。

ちなみに私の最初のLTは飛び入りでライブコーディングしようとして壇上に上がったのですが当時Windowsを使っており接続できるケーブルがなくて、何もできずに壇上を降りました。悔しいし恥ずかしかったです。
それでも今はLTはたくさんやれてます。

イベントを探す

勉強会のイベントページや公式のSNSアカウントを見るとLTを募集してるところがあります。
まずはLTができるイベントを探してください。
※私は勉強会のイベントページを見てまずLTがあるか確認します。

LTをやってみたいなと思う人はとりあえず応募すると良いです。
締め切りがあれば、きっとあなたの背中を押してくれます。

ネタを考える

これがしんどいと言う人がいますが、肩の力を抜いて考えてください。

例えば

  • こんな素敵なツールつかってます
  • 課題があって、こんな感じで乗り切った
  • 今こんな課題があって、こんな風に思ってます
  • 今度こんなことやります!

とか。
初対面のあいさつで同業種の人に話せる内容を考えてみてはどうでしょう?

いくつか頭をよぎるものがあると思います。
どうしても無いようなら、LTで自己紹介するのも良いと思います。
初心者の人とかの発表は実はかなり歓迎されていますので、自己紹介も良いネタになると思います。
例えば、「初心者の私が初めて勉強会に参加してみた」とかでも大丈夫だと思います。素直な気持ちをぶつけましょう。

ネタが思いついたら「本当に伝えたいことは何なのか」を意識すると内容をまとめやすいです。
別に凝った作りにしなくて良いです。

構成を作る

最初っからスライドに手を出すのは早いです。
まずはどんな構成にするのか考えて見ましょう。

まずは大枠を決めて、その枠内になにを入れるのかをメモ帳とかで書いておきましょう。

構成をするとき、以下のような事を考えると整理しやすいです。

  • どんな導入から入ると話しやすいか?
  • どんな展開だとスムーズに話せるか?
  • どんなところを一番強調したいか?
  • どんなシメをするとすっきり終われるか?

話せる時間は5分しかないので、そんなに詰め込まなくても良いです。

スライドをつくる

構成ができたらスライドを作りましょう。
スライドを作る際、カッコイイデザインにするぞ!とか思うでしょうが諦めましょう。
時間がかかりすぎるので、そんな時間あるなら発表の練習しましょう。

テンプレートはこの辺を使うと良いと思います。
無料で使えるプレゼン向けのGoogleスライドのテンプレートです。

SLIDESCARNIVAL

予行演習する

はい。練習しましょう。スライド作って終わりとか無謀です。
発表練習に一番時間を使うのをオススメします。

練習をしてるうちにこの構成だと伝えられない、時間が長い・短いなど調整する必要が出てきます。
また、練習をすれば発表当日「何はなせば良いっけ?」みたいな事もなくなります。

5分に全力を込めましょう。

発表する

初めての発表だと「失敗するんじゃないか」とか「他の人より絶対見劣りする」とか不安な気持ちになると思いますが忘れてください。

今あなたは、これまでやれてこなかった新しいチャレンジをしているのです。
他人と比べず過去の自分と比べて何歩も前進してる自分を見てください。
胸張って発表して良いんです。

スライドの公開

発表したスライドは公開したほうが絶対良いです。

多分、イベントのハッシュタグとかがあると思うのでそこにツイートするとか、イベントの主催の人に送るといい感じにシェアしてもらえると思います。
公開するとまたいろんな人の反応がもらえて良いですよ。

公開すると会場にいない人にも情報が伝わって、全然違う機会で「あのスライドの人か!」みたいな楽しい機会も得れます。

私もスライド公開してたら一時期「おっぱいの人だ…」とか呼ばれたりしてました。
凄く真面目な発表だったのに…。

おっぱいから見るUI/UXとPERSONA

LTをしてみたい人

12/3(土)に大阪でLT大会があります。
関西フロントエンドUG 年忘れLT大会
エンジニア・デザイナーが一挙集結していろんなLTが見える貴重なイベントです。

もちろん、私も参加します。

よかったら参加してみてはいかがでしょう。

見てみたいって人は参加枠は今満席ですが、当日キャンセルもでるかもなのでとりあえず登録しておくのも良いかもしれませんね。

次回のLT AdventCalendarは@reiji1020さんです。12/5の更新が楽しみですね。

最後にLTはいいぞ(*ゝω・*)

2016年の10月から大阪のシステム制作会社でデザイナーとして働きはじめました。
弊社はリモートワークOKな職場で、割りと自由が効く職場環境で約2ヶ月実体験してるリモートワークの事を紹介しようと思います。
Continue reading “大阪にあるリモートワークOKな会社で働いて感じた事”

これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。

乗り換えた理由

以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。
理由は単純で、Frontnoteだと導入が楽だったからです。
スタイルガイドジェネレーターを探していた当時aigisを導入してみたのですが、私は上手くできなかったので泣く泣く諦めて,Frontnoteを使うことにしました。

Frontnoteは今でも使いやすいスタイルガイドジェネレーターだと思うのですが、カスタマイズが私にとってはしにくくて自分の作りたい形での出力ができなかったので、使ってるうちに自分の要望が増えてきてしまったので、この度aigisに乗り換えました。

現在もaigisはバージョンアップが進められており、導入もしやすくなったと聞いたのも乗り換えのきっかけです。
サンプルとかもちゃんと用意されています。嬉しい事に日本語版のドキュメントもあります。

aigisの良いところ

aigisを導入してみて良かったと思うところはjadeが使えるところです。
jadeで書くとこんな感じでかけるので、cssのclassがコピペしやすくてドキュメントを書く負担が減るところです。
```jade
.c-btn
      a ボタンの名称だよ
```

※こんな感じに書くとスタイルガイド内にHTMLが生成されます。

他にも、スタイルガイドのテンプレートが自分用にカスタマイズし易いところも気に入っています。
スタイルガイドのテンプレートはjadeベースで使えるものがあってレイアウトや色など自分のCSSで簡単に変更できるので拡張性が高いという印象です。
外部JSも簡単に入れれます。

aigisの使い方

node.jsとgulpを使える環境があればすぐお試しいただけるようにサンプルを作りました。
よかったら使って見てください。
サンプル

サンプルの使い方

ターミナルを開いて、下記コマンドを入力してください。
npm install

gulp aigis

これをすると「styleguide」ってディレクトリができていると思うのでその中にあるindex.htmlにアクセスするとスタイルガイドが出来上がってるかと思います。

スタイルガイドについて

スタイルガイドは作って終わりじゃありません。
作り続ける事が大事です。

よく「CSSなんですぐ死んでしまうん」と言った声を現場で良く聞くのですがそれは情報の共有がされていない事と適切なCSSの設計ができていないからと思います。

私はスタイルガイドを作り始めてCSSの設計をちゃんと考える時間を作るようになりました。
世の中ではBEMやFLCSSが良い風潮を感じますが、個人的にはBEMやFLCSSを使うだけでは、活きの良いCSSは書けないかなと思っています。

絶対にコレといったCSS設計はないと思っていますが、スタイルガイドに合わせてCSSを設計するとそれなりに良い感じの設計になるのでは無いのでしょうか。少なくとも何もない状態のオレオレコーディングよりは使いやすいと思います。

CSSを書くプロの人はたくさんいると思いますが、CSSを設計できるプロはそれほど見たことがありません。
私はスタイルガイドを通じて納品のためのCSSではなくプロジェクト運用のためのCSSを書ける人材になろうかなと思う次第です。

今後はなるべく業務と関係ない自分のプロジェクトはgithubに公開して、一緒にスタイルガイドも公開していきたいなーと思ってます(*ゝω・*)

転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。

ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。

以前使っていたデザインツール

もともとはFireworksをメインに使っていました。
ただ開発が終了してしまったのもあって別のツールに乗り換えないといけないなーと思ってPhotoshopを次の制作ツールに決めていました。
Photoshopもアートボードの採用やアセット機能の追加などかなりWebデザインでも使える感じになっていたので、Sketchを触る前ではPhotoshopを使うと決めていてデザインツールの選択に迷いはありませんでした。

使う前と使った後のSketchの印象の違い

正直Sketch触る前は全然期待していませんでした。
でも実際に触って見るとそのイメージは一変しました

触る前

デザインツールなんて出来る事はどれも似たようなものだし、少し得意・不得意があるだけ。
「Sketchはプロトタイプとかが得意でワイヤーフレーム作ったりするのが得意なんでしょ」くらいしか思ってませんでした。
またSketchはWindows版がないので、他のパートナーさんとのデータの共有が大変そう…。あと英語で日本語じゃないんでしょ‥とかどちらかといえば不信感を持っているくらいでした。

触った後

触って一番最初に感動を受けたことは軽い!圧倒的に軽い!やばい!!
懸念していた英語もまったく苦になりませんでした。
私は動画を見て勉強したのですが、覚えた後はショートカットキーばかり使うのでまったっく気になりません。
冷静に考えれば単語が英語なだけなので、中学生でもわかるレベルです。
いい大人が英語だからという理由でツールの選択を外すなんて恥ずかしいですね。

Sketchの強み

デザインツールはやろうと思えば大体どのツールでもできる事が多いです。
でもSketchだからそれがやりやすいというものがたくさんあり私はそこに惚れ込みました。

デザイン編

Sketchを使っていて、良いなと思うところは軽さです。
他のデザインツールだと画面を作っていくうちに、重くなっていってしまい開発後半ではフットワークが重くなる事が多いのですがSketchは違います。

圧倒的軽さゆえにそのサービス・Webサイトの全画面を一つのファイルの中で完結させれます。
一つのファイルでサービスの全体感が見えるようになるとデザインの統一感が自然とでます。
あそこの画面はどうなっていたっけ?みたいな事があっても別のファイルを開く必要はありません。
画面をスクロールさせるだけ確認もできます。
一つの画面の中にあるファイルなのでコピーも簡単です。

また一つのファイルで完結させれると、データの管理が楽になります。
炎上しやすい制作会社さんは多いと思うのですが、リリース後どの画面が最新で、不要なデザインデータがどれかわからず整理されないままプロジェクトが落ち着き、リニューアルしようかになると「あれ?どれが最新版??TOPのデザイン今と違うぞ…」みたいな事になってませんか?

Sketchを使えばもうそんな汚いデータ管理とはおさらばです。
Sketchはアートボードの他にもページといった機能も用意されていてファイル内でデータが整理させやすくなってます。

私はバックアップのデザインを別ベージに念のため程度に残しておいて開発を進めてます。
デザインデータが軽いのもあって、gitでバージョン管理してるのである程度落ち着いたらバックアップ用に切り離していたものは削除してます。

コーディング編

SketchはCSS周りの書き出し・管理もスムーズでファイル内でどの色が使われているか、フォントはどれがどのくらいあるかも確認できます。
これによってスタイルガイドやデザインのガイドラインが容易に作ることが可能になります。

最近はCSS周りの設計が複雑になり、こういったガイドラインになるようなものがないと全体感をつかむことが難しく、開発した人が抜けてしまうとブラックボックス化しやすいのですがSketchを使うことでそういったリスクを避ける事ができます。

Sketchは書き出し周りも非常に柔軟に対応できています。
特にAndroid・iOSといったアプリでも複数ある書き出し設定を容易に行なえます。

他にも外部のWebサービスと連携することで、コーダー・プログラマがSketchを持っていなくても、余白の数値や色・フォントサイズなどをブラウザ上で確認できますので、連携がとてもスムーズなります。
書き出しもブラウザから行えますので、コーディング途中に起こる、「コーダーがデザインデータ整理したけど、あとからデザイナが整理前のPSDで再度修正して送ってくるツラミ問題」も解消できます。

プロトタイプ編

SketchはAdobeのプロトタイプツール AdobeXDと比較される事が多いのですが、実はSketch単体ではプロトタイプの機能はありません。

プラグインを通して別のWEBサービスと連携させる事でプロトタイプとして成立します。
プラグインを通すときくと面倒に聞こえれるかもしれませんが、ショートカットボタンひとつ押すだけで画面を最新版にアップデート出来るので、全然苦になりません。
むしろ一つの統一されたサービスのようにスムーズに連携できます。

私がよく使うプロトタイプツールはprottInVisionです。
個人的にはprottはワイヤー時の確認に便利でデザインの確認だとInvitionが便利という印象をもっています。
プロジェクトの癖によってこういったWebサービスを柔軟に選択できるのもSketchの強みかなと思います。

Sketchを使いだしてからの変化

Sketchを使いだしてから、別に彼女ができたり、急に痩せてモテモテになったり、宝くじが当たって一攫千金とかの変化はないのですが、開発の中で感じた変化はありました。

修正の品質向上
Sketchは軽いのでサクサク修正ができます。
それこそ、打ち合わせの最中にでた話もすぐに修正して「こんな感じですか?」みたいにイメージを共有できてやり取りがスムーズになりました。
あまりに早くなりすぎて、修正が簡単に思われてるのかディレクタさんがぽいぽい修正を言ってくるのはちょっとつらいです…

ファイル一つで開発しているサービスの全画面をまとめていますので、一回の変更がどこに影響するのかもすぐに判断できますし、修正もすぐ出来るので修正の漏れが減ります。
後でやると思ってたらコーディングのときに忘れてたなんて事はSketchを使えばもうありません。

コーディングスピードの向上
私はsympliというサービスを使っているのですが、これを使うと余白やフォントサイズなどの数字が取得しやすくコーディングのスピードがぐっと上がりました。
流用出来るパーツ設計
Sketchにはシンボルの機能が備わってます。
これはどのデザインツールよりも高機能です。

Sketchを使いながらデザインをするとどことどこを同じパーツとして作るかといった選定がスムーズに行えます。
こういった設計を行えるとコーディングもスムーズになりますので良いです。

他にもカラーパレットやスタイルも管理しやすいので、自然とコーディングに適したデザインに仕上がっていきます。

こういった設計は運用を考える上では重要なことですね。

プロトタイプの導入
これまで私はプロトタイプというものは全然使ってませんでした。理由は面倒だったからです。ごめんなさい。

でもSketchを使いだした事でプロトタイプを面倒とは思わなくなりました。むしろ必須です。
プロトタイプを行うと画面設計がきちんとされ矛盾がなくなります。
開発途中で気がつく、「あ、これ抜けてる」がなくなります。
これによってスケジュールの遅延の可能性が減り、炎上するリスクを減らせれます。
抜けを早めに気がつけると準備の時間が持てるので、非常に良いです。

またクライアントもプロトタイプがあると完成形のイメージをしやすいので意見をもらいやすく、後半でのどんでん返しのリスクを減らせれます。

メインツールに選んだ理由

ツールは使うもので柔軟に選ぶというスタンスですがデザインツールに関してだけはSketch一択です。
これ以外でWebデザインはできません。そのくらい依存しています。

なぜここまで推しているのかというと、最初(ワイヤーフレーム)から最後(コーディング)までSketch一つで完結させれるからです。
他のデザインツールでも出来るじゃんと思う方は大勢いらっしゃると思うのですが、違うんです。Sketchには無理がない。自然にそういった事が可能なのです。

私は引き継ぎができない案件は嫌いです。
引き継ぎというのは未来の自分も含みます。
二週間も触らなければ、デザインの事忘れちゃいますから、全体感やこれまでやってきた事が何か瞬時に見える化できるSketchの魅力は重要です。

Sketchを使えば引き継ぎができる。
この一点においてSketchは他デザインツールに追従を許さない完成度を誇っています。

案件は公開したら終わりじゃないです。
公開してからも続けるとき、しんどくないですか?
外部のパートナーとやり取りしていて最新版のデザインデータがないとか、TOPページのPSDが複数あってどれをペースに更新していっていいか見てわからないとかありませんか。
Sketchを使って私はそんな悩みを解消しました。
私のSketchは強いぞ!

最後に

Windowsで使えないとか関係ないです。Mac買おう。
Mac使ってるならSketchを使おう。
もうSketchがないとマジ無理(私は)。

よく、「うちの会社じゃSketchの導入は無理」と言った声を聞くのですがSketchはいいぞ。まずは試そう。
学習コストも低いですぞ。
一度身近なSketchユーザーのデザインファイルを見たり、フローを聞いたりすると良いと思います。
まじでやばい。

Sketch

2016/11/05に行われた 「フォルトゥナ ランディングページセミナー」に参加してきました。

デザイン関連の勉強会というのも珍しいですし、しかもランディングページといったあまり表に出てくる事のない勉強会なのもあって新鮮な話・心揺れる話が盛りだくさんで非常に満足の行くセミナーでした。

ちなみにランディングページのセミナーとあって別途ランディングページも作られていました。
セミナーLPを見る
Continue reading “現役Webデザイナーがランディングページのセミナーで学んだこと”

今年からタスク管理のツールをtrelloからasanaに乗り換えました。
asanaは非常に優秀なタスク管理ツールです。しかし日本語を入力する際に入力中の文字列が複製されるというバグが有りましたがその解消法のご紹介します。

Continue reading “【簡単】asanaの日本語入力のバグを直す方法”

Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。

これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。
簡単にですが公開されたフォントを紹介します。
Continue reading “【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページを使って見た。”