[WordCamp Osaka 2018] Gutenbergで作るランディングページ 改定版

今日、2018年6月2日に開催されるWordCamp Osaka 2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。

WordBench Osaka & Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました(大変でしたっ)。

使用したスライド

Gutenbergってなんだ?

GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。
エディターインターフェースといったほうがしっくり来るかも。

今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。

パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。

WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。

そういった環境の変化にユーザーは敏感です。より簡単な方に流れていくのは人の真理でもあります。

今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。

その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。

Gutenbergの使い方

当日は、デモサイトを利用して参加者に触っていただく機会を設けました。

Gutenberg 対応のテーマの作り方

ここが半年前と大きく異なる部分でした。

add_theme_support の gutenberg がなくなり、それぞれがテーマサポートとして独立しました。

 

 

 

GutenbergChallenge

Gutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。

実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます!

http://wb.onocom.net/

GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。

https://github.com/onocom/gutenberg-challenge-introduction

感想

ワークショップ盛り上がってすごく嬉しかったです!

WordCamp Osaka 2018最高でした!



【開催報告】Mautic Meetup Nagoya #6 緊急企画 ファウンダー David Hurley 氏来日セミナー

開催してからだいぶ時間が経ってしまいました(^_^;) 当日の様子や資料をブログします。

Mautic Meetup Nagoya #6 緊急企画 ファウンダー David Hurley 氏来日セミナー開催しました

当日の内容は以下の通りです。

台風が直撃したため、参加者は激減しましたが、David Hurley 氏のセッションが間近で聞けて、非常に充実したセミナーでした。

開催日

9月20日  19:00~

TIMETABLE / スケジュール

– 18:30 開場・受付開始 / Door open

– 19:00 開会のあいさつ / Opening

– 19:05 マーケティングオートメーション & Mautic とは / What is marketing automation and what is Mautic.

– 19:45 名古屋の事例紹介 / Case Study from Nagoya

– 20:00 David Hurley: Mauticとマーケティングの未来 / The Future of Mautic & Marketing

– 21:15 会場を移動し任意の参加者により懇親会 / After party at different venue.

マーケティングオートメーション&Mauticとは

私が担当したセッションです。

マーケティングオートメーションという単語は聞き慣れない方も多いと思います。そういった方に向けた内容にまとめました。

https://www.youtube.com/watch?v=lkKUaVMjAQA

MA(マーケティングオートメーション)初心者運用のススメ

株式会社タスクの山田さんが担当されました。

まだまだ、Mauticの導入事例が少ない中、具体的な導入事例を聞けた貴重なセッションでした。

https://www.youtube.com/watch?v=oIBq5T1wVSs

David Hurley: Mauticとマーケティングの未来

最後はMauticのファウンダーである、David Hurley(デイビッド・ハーレー)さんが、約1時間に渡るセッションをしてくれました。

なぜMauticを作ったのか、オープンソースの力についてなど、幅広い話をしてくれました。

TEDのプレゼンテーションを見ているような、引き込まれるプレゼンでした。

 

印象に残った言葉

その後の懇親会で私の拙い英語を駆使してDavidさんと話をしていて印象に残った言葉がありました。

Mautic を広めて行くために大切なことは何だと思う?という私の質問に対して返してくれたDavidさんの言葉です。

1. understand ・・・ 理解してもらうこと
2. do ・・・ 使ってもらうこと
3. Share ・・・皆にシェアすること

これが大切だよ。

なんてシンプルで分かりやすい言葉だろう!

Davidさんありがとうございました。

MauticMeetup集合写真



【mautic】【告知】9月20日(火)名古屋でMauticのイベントを開催します。しかもMauticのファウンダーが来日します。

Mautic Meetup Nagoya #6開催

Mauticのイベント開催します

9月20日(火)19時から、ウィンクあいち(名古屋駅から徒歩5分)にてマーケティング・オートメーションツールMauticのイベントを開催します。

Mauticを活用して営業活動を(部分的に)自動化することで、営業活動の非効率・無駄を改善し、お客様とのより良い関係を築いていくことも可能になります。

営業活動に困っている中小企業の方、少人数でより精度の高い営業をかけたい方など、ウェブ業界以外の方にもぜひ参加頂けると嬉しいです。

なお今回、マーケティング先進国アメリカからMauticの開発者が来日してお話をしてくれるので、海外の最新マーケティング情報も得られるかと(^o^)

ちなみに私も、マーケティング・オートメーションとMauticについてのお話を少しだけします(緊張)

残数も残り僅かとなっておりますので、気になる方は早めの参加申込をどうぞ~。

■Mautic Meetup Nagoya #6 緊急企画 ファウンダー David Hurley 氏来日 Meetup

【日時】

2016年9月20日(火) 19:00 ~ 21:00

【会場】

ウインクあいち 13階 1305室
〒450-0002 愛知県名古屋市中村区名駅4丁目4-38

【参加費用】

1,000円 (会場払い)

【参加申込】

http://www.meetup.com/Mautic-Meetup-Nagoya/events/233462748/



[勉強会]第1回 D2D WEBグラフィックツール今昔 に参加してきました

d2d

先週末に京都で開催されたグラフィック関係の勉強会に参加させていただきました。
グラフィック系の勉強会に参加することはあまり無いので大変勉強になりました。

第1回 D2D WEBグラフィックツール今昔 ~デザインワークフローの転換~
https://d2draft.doorkeeper.jp/events/40613

concrete5のテーマを制作している方に出会えたり、デザインで独立しようとする方に出会えたり、出会いや学びの多い勉強会で、京都まで足を運んだ甲斐がありました。

 

感想

デザイン界隈では当たり前なことかもしれませんが、以下のIllustratorの機能を活用することでよりWEBへの親和性を高めるという話は大変勉強になりました。

・スウォッチ
・段落スタイル
・文字スタイル
・グラフィックスタイル

上記機能を活用することで、

  • デザインの表現をモジュール化(部品化)してチーム内・会社内での共有することで生産性を高めること。
  • お客様とのコラボレーションツールを使ってコミュニケーションコストを下げ、成果物の精度を高めること。
  • Adobe CC からそういった共有化やコラボレーションツールとの連携が強化されていること。

IllustratorやPhotoshop、更にそれを取り巻く環境がこんなにも進化しているとは。と感じた勉強会でした。

[コラボレーションツール]

・アボカド
https://avocode.com/home/

・ゼッペリン
https://zeplin.io/

 

 

スライド

杉山さんのブログにスライドがアップされていました。

D2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2(土)

#1 Illsutratorでのウェブデザインワークフロー例の紹介
http://prezi.com/mojhh25kig3u/?utm_campaign=share&utm_medium=copy

#2 Photoshop,Illsutrator,アセット管理のワークフロー例の紹介
https://docs.google.com/presentation/d/1ipdFr4nN0gbHdiJvKLV2LVcISAvMGbrmXSbCvfNaA-8/edit#slide=id.g1289d4a935_2_156

#3 Sketch,Experience Design,コラボレーションサービスのサマリー
スライド:webdesign-workflow.pdf

 

以下、当日にメモした内容です。


#1 Illsutratorでのウェブデザインワークフロー例の紹介

川井昌彦さん

Cherry Pie Web
http://www.cherrypieweb.com/

Fireworksを相当古いバージョンの頃から使っていて、最近ではIllustratorとPhotoshopでWEBデザインをしているとのこと。
Fireworksを未だに愛用している私からすると、まさに私が進む道を照らしてくれた内容でした。

 

なぜIllustratorを使うのか?

・元々はFireworksを使っていた
・写真はPhotoshop、ロゴ・地図はIllustratorで作ってた
・Fireworks開発中止の連絡があってからIllustratorがFireworksの代わりになった
理由:元々紙のデザインを作っていたから

・IllustratorはHTML+CSSとの親和性が高い
・画像がリンクで配置できる(画像も、ドキュメントの解像度に依存しない)
・スタイル機能は、外部CSSの考え方に近い
・アピアランスは、CSSで表現できる
・画像の書き出しだけでなく、HTMLで表現する部分のデザインも出来る

 

サンプルサイト

非公開のためURL掲載できませんが以下の内容で構築されておりました。

・WordPressで構築
・レスポンシブ
・Bootstrapベース
・多言語(日本語・英語・中国語・韓国語)

Illustratorデータを紹介(CC2015)

・お客様にデザインを見せる必要があるのでモックアップをIllustratorで毎回作る。
・アートボードを2つ作る
・PC用、スマホ用
→ スマホ用はレイアウトを確認するのみ。書き出しにはPC用を使用する。
・Bootstrap用の背景を設置(960px幅)
→ これに合わせてデザインを作成していく
・レイヤー
・ヘッダーレイヤ
→ 多言語ボタンは国旗のみ書き出している
→ 翻訳ボタンという【グラフィックスタイル】を作っていて、CSSを書き出して?いる
→ 多言語サイトなので、画像ファイル名のサフィックスに_jaJPなどを設定している
・各ページのレイヤ(全ページを一つのアートボードにレイヤを分けて設置している)
→ 別々のファイルにしてしまうとスタイルが共有できないため
→フッター・バナー・グローバルメニュー・スライドショーなども各レイヤに配置してある。
→ あるページはスライスを一つも書き出していない。
→ でもお客様に見てもらうためにテキストを流し込んである
→ 見出しなどは【段落スタイル】を設定していてCSSと連動している
→ フォントファミリーにはメイリオを設定していて実際にブラウザで見える画面と同様に確認してもらっている
→ HTMLの構造を意識したデザイン
→ 使う画像は高解像度の画像をリンクしてはっている。

制作時に注意していること

・イラレの設定をWEBデザインに適した設定にしておく
→ 新記事にプロファイルをウェブにしている。
・配置画像は、すべてPSDにしてリンク
埋め込まない、画像補正等はすべてPhotoshopで行う
・画像で書き出す部分とHTML+CSSにする部分はパッと見てわかるようにする。
・レイヤを活用してわかりやすく
・HTMLにする部分は「文字組みアキ量設定」を適用しない
・スウォッチ、段落スタイル、文字スタイル、グラフィックスタイルを積極的に使う
・スライスは一つのレイヤーにまとめる(重なるスライスの前後面を操作しやすい)
・レイヤーはHTMLの入れ子を意識してまとめる

 


#2 Photoshop,Illsutrator,アセット管理のワークフロー例の紹介

完山 祐毅(もとやま ゆうき)さん

motoyamayuki.com
http://motoyamayuki.com

無駄なくスマートな制作をされているなぁと感じる内容でした。
画像アセットの話とかProttの話とか、名古屋の田舎者には衝撃的でした。

 

制作フロー

・Illustratorはprottでワイヤーフレームを作る
・Illustratorでデザイン制作
・Plottoでお客さんに確認

 

Illustratorでデザイン

・アートボードでページ管理
→デザインが完成した時に、PNGでページ全体を書き出し→アートボード毎に作成にチェックをして書き出し
→クライアントに確認してもらいやすい
・シンボルでモジュール化
→ グローバルナビをシンボルとして登録
→ シンボルを編集するとすべてのアートボードの部品が変わる
→ 登録したいものを選択してシンボルに放り込むと登録できる
・グローバルカラー
→スウォッチ→色選択→編集するとすべての色が変わる
→色はスウォッチから設定する
→スウォッチメニュー→新規スウォッチ→グローバルにチェックを入れる
・AdobeStock
→AdobeStockで素材を探す
→ダウンロードするとIllustratorのライブラリに表示される
→カンプ状態で保存してクライアントOKが出たら購入する

 

Prottでクライアント確認

Prott
https://prottapp.com/ja/

・Prottで新規プロジェクト作成
・リンクを設定していく
・シェア→URLをクライアントに送る
・Prottで改善されるといい点
ページ内リンクには対応していない。
ページの背景が勝手に設定される

 

Photoshopでパーツ書き出し(画像アセットを活用)

・イラレファイルをコピーしてparts.aiとして保存
・書き出したい画像やアイコンだけを一つのアートボードにまとめる
・アイコンはグループ化しておく
・Photoshop形式にして書き出し
→ スクリーン・レイヤーを保持を選んでおくこと
・Photoshopでファイルを開く
→ レイヤー名をファイル名に設定 header.pngなど
・ファイル→生成→画像アセット
parts-assetsフォルダに各画像が書き出される
・Photoshopのスクリプト「LayersRenamer」を使うと一括でレイヤー名を設定出来る
・Photoshopを保存すると自動で画像が書き出される
・logo.png8にするとPNG-8
・logo.jpg10にすると100%の圧縮率で保存
・logo.jpg,logo.gifとするとJPGと画像が生成される
・RETINA用に@2x的な書き出しも出来る
→ 画像はスマートオブジェクトにしておく必要がある
・Adobe Layer Nameスクリプトを使うと上記のレイヤー名に変更可能

 

Gyazoで確認

Gyazo
https://gyazo.com/ja
→ ソフトを立ち上げてエリアを選択すると画像がサーバにアップされる
→ その画像をクライアントに送って確認してもらう
→ オンラインで注釈をつけたり出来る

JPEGminiで画像ファイルを圧縮
http://www.jpegmini.com/

 


#3 Sketch,Experience Design,コラボレーションサービスのサマリー

D2D主催者
杉山 敦さん

pictron.net
http://pictron.net

Illustrator、Photoshopを製品単体で使うのではなく、他のサービスとコラボレーションして使う方法なんて考えたことなかったし、できるとも思っていませんでした。
杉山さんのセッションを聞いて、これからのデザインは、自分で煮詰めるものからオープンに知恵を出し合ってするものに変わっていくんだなと感じました。
avocode(アボカド)やzeplin(ゼッペリン)のように、デザイン業界のGithub!的なサービスがこれから更に増えていくんだろうなぁ。

聞くのに必死過ぎてメモが不完全ですみません。
デザインの未来を感じられるセッションでした。

 

 

データ構造の公開とコマンドラインインターフェースの実装

新たにデータフォーマットに対応した
コラボレーション
プロトタイピング
バージョニング
オープンAPIによる連携
Sckech
Photoshop
slack

 

Photoshop CC 2015の話

画像アセットは書き出し機能ではない
Generatorテクノロジーという概念
BracketsでPhotoshopの画像を表示させながら連携できる
SlackでPhotoshopデータを共有出来る
Extract機能がある物同士は連携できるっぽい

 

Sketchの話

https://www.sketchapp.com/

いい点

・動作が早い
・グラフィックデータが軽い
・有用なプラグインが開発されている
・データ、APIがオープンで連携サービスが多い
・書き出しの階層化はスマート
→ 書き出しの設定を複数出来る。1倍書き出しと2倍書き出し(RETINA用)をまとめて出来る

微妙な点

・ビットマップ編集は途上
・パスツールに慣れが必要
・Windows版がない
・結局Adobeは必要

プラグイン

SketchGitプラグイン

→ Gitとの連携が容易(プレビュー用のデータも自動で作ってGitにアップしてくれる)
→ 過去との差分も見やすい
→ 変更をウォッチして自動的にGitにアップするツールがあったりするがデザインの性質上おすすめできない

CRAFTプラグイン(無料)
https://www.invisionapp.com/craft
レイアウトの繰り返しなどを自動化してくれる
PhotoshopCCにも入れれる

 

コラボレーションサービス

・Adobe Experience Design CC
CRAFTの影響を結構受けているみたい

・アボカド avocode.com
https://avocode.com/home/
Sketch、イラレで作ったデータをアップする
ローカルアプリと連携することで書き出しが出来る
LESSやSASSにも対応している
コメント機能などがあり、コラボレーションしやすい
バージョン管理もしてくれる

・ゼッペリン zeplin.io
https://zeplin.io/
Sketchで作ったデータを入れるとオンラインでPNGやSVGで書き出しできる
LESSやSASSにも対応している
Invite機能をつかえばコラボレーションしやすい

・ウエイク
https://wake.com/
上記と似たサービス

 

プロトタイピングツール

・インビジョン inVision
https://www.invisionapp.com/
→ 画面上でメンバー間でやり取りできる

・marvel
https://marvelapp.com/

・Prott
https://prottapp.com/ja/

・Adobe Experience Design CC
http://www.adobe.com/jp/products/experience-design.html

 

セッションまとめ

これからの制作環境はオープンで繋がることがキー
でもツールが進化したからと言ってアイデアをだしてはくれない
デザインをサポートしてくれる自分にとって楽な技術を選択しましょう。


 

長々としたメモですみません。

勉強会の後の懇親会も楽しかったです。京都また行きたい!

ありがとうございました!