プライマリで仕事を受注した案件でconcrete5が採用に至ったポイント

Share on FacebookTweet about this on TwitterShare on Google+

この記事はconcrete5 Japan Advent Calendar 2017の7日目の記事です。8日目の記事はToshiaki Endoさんです。

ピクトロンウェブプランニングはおかげさまで紹介などでお客さまから直接つまりプライマリで仕事を受ける案件があります。
その場合CMSなどは特に強く希望なども決まっていない事もあります。
「○○などは名前を聞いたことはあるけど、どうか?」という話や「前は○○を使っていたんだけど」という話をヒアリングの段階で聞かれることがあります。
リテラシーのレベルは様々、お客様によってはPCはワードとエクセルを少しさわるくらいという方もおられます。
私たち自身はconcrete5でサイトを日々制作しているので、その良さや悪さも最初の印象が薄れていたり、また自分では簡単にできると思う事が違ったりします。
そんな時にconcrete5や他のCMSを動かしたデモサイトを見ながら説明をした結果、採用に至るうえで評価されるポイントが思っていた事と違うことっだったりします。それを再確認する意味で自分のメモ的にもヒアリングの説明で使えるように、なるべく平易な言葉で書いておこうと思います。
concrete5のデベロッパーの方には釈迦に説法な話ばかりですが、思っている事を言葉にまとめるのは大事だと思うのであえてこの機会にやっておこうと思います。

実際のページを表示して、そこで編集できるのいいよね

シンプルだけどいつも言われます。
管理画面のデータのリストと実際のページの構成がカテゴリーや形式により違う場合、編集に慣れるまで直感的でないため時間がかかります。またページの各部位もブロックをさわって視覚的にアクションで編集できる事がわかるのは高評価です。
これはリテラシーのない方には特に有効で、先にconcrete5を経験し他のCMSを管理したときにとても面倒だと感じるそうです。

またサイトマップと実際のページ遷移から編集への2つのメソッドがある事も安心感があるようです。

自分が編集できるところだけ編集メニュー表示するのいいね

権限設定を部署により分けたり担当により分けたりした場合、自分の編集できるページだけブラウジングしている時に編集メニューが表示されるのはシンプルでわかりやすいと言われます。

ブロックなども同じとにかく編集できないなら見るだけです、というのはどこかに編集不可と出てくるよりシンプルですねと言われます。

保存と公開がわかれてるのいいよね

ワークフローまでいかなくても、公開せずに保存している機能だけでかなり便利だと言われます。
身内で管理してるだけでも「次にこれでアップしようと思うのでログインして見てね」という段取りだけでもできないCMSが多いのは事実です。これは、単一のページの内容なら可能ですが、時系列で出しているリストやメニュー、デザインテーマごと一時的にキャンペーン適用まで実際のサイトで確認できるのは実際の運用段階でとても好評です。そして5.8より追加された時間単位での公開でさらに評価を得ることができています。
実際の運用側ではトップページに多くの要素が管理されキャンペーンバナーなどは、いついつ何時公開などとクロスメディアキャンペーンなどでは細かく指定されます。それをユーザーが簡単に操作できるのはメリットだと評価されます。

テストサイトを別に作ってデプロイというのは運営になれてる人はいいですが、初心者には敷居が高いし億劫だと感じる方が多いと感じます。

自分で段組できるのいいね

PCだけの時はいろいろなツールでできたレイアウトですがレスポンシブになってから変にコード書かれたり入れられたりすると困った事になったりします。
でもやはりコンテンツを作る時に写真右、テキスト左、次の段落は写真を右になどとアイキャッチを考えると構成をしたいというのが当然です。
コードのひな形を作る事はできますが、それも限界があります。
concrete5のレイアウト機能でcss frameworkのグリッドレイアウトがグラフィカルにコントロールできる事は、サイトのシステムを納品した後のユーザーの可能性を広げます。
この日々の更新の段組の可否は意外に運用のストレスになるそうです。

画像のトリミングできるのいいね

これは普段グラフィックソフトを使っているので気が付きませんでした、ワードやエクセルはあって写真も撮れるけどトリミングどうするの?っというシーンにまれに遭遇します。グラフィックソフトは、機能が豊富すぎて意外に敷居が高いので、シンプルなトリミングがCMS内でできてしまうことで思いの他評価を得たことがあります。
ユーザーにはもう一つソフトを覚えたりインストールしなくて済むと言われます。
また昨今のオフィス環境では、許可なく新しいソフトをインストールできない場合もあります。

やり直しができるのいいね

各ページごとにロールバックができてやり直しができるというのは、実は操作の習得の早さにもつながります。
前述の保存と公開が違う事とやりなおしができる事でユーザーはおっかなびっくりさわらなくて良くなります。
実際のサイトで安心して試す事ができるのは、習得の早さや運用の積極性に影響します。

開発元の日本法人あるのいいね

実際にconcrete5 japanと仕事をするわけではないのですが、これはユーザーの安心感につながるそうです。
ローカラズやバグフィックスに安定が望める印象になるそうです。またアメリカでもメインとなる企業が開発を中心になっているというほうが良い印象をもたれる方も多いです。

有料の拡張機能のマーケットがあるのいいね

これは賛否ですが、私は全部無料がいいという人はあまり対象にしようとは思いませんので、マーケットが管理され内容が評価された機能追加が整備されている事は評価の対象であると思いますので、アピールします。
これはきちんと評価される方には評価してもらえます。

モバイルのプレビューできるのいいね

制作をしている人ならFirefoxやChromeでデベロッパーツールを出せばいいとなりますが、これは見た目も使い勝手も制作者向けです。トリミングと同じで使っている仕組みの中で完結するのは評価されます。
複数のツールを使う事にストレスを感じないと思うのは制作者の悪いくせです。
レイアウトグリッドでレイアウトを決めてブロックでコンテンツを入れでモバイルプレビューで確認するという工程でコード記述が必要ないというのが評価のポイントです。

一括SEOアップデーターがいいね

タイトルやキーワードを説明を時間のある時にコツコツ入れて行きたいけど、どこまで入れてどこに入れてないかをスタッフ間で共有せずともざぁっと見れて入れていけるのは思いの他評価されます。
たしかにページごとにしか見れないものは、確認に時間がかかります。

1つの画像をあげると違う大きさのキャッシュ画像を自動で作ってくれるのいいね

最近はスマホもデジイチも高解像度なので、そのままアップロードしてしまう人が多くいます。
他のCMSでトップペ−ジがすごく遅くなったという連絡でページを見ると4000px程度の画像が4つぐらい挿入されていました。
サムネイルを自動的に段階的に作りキャッシュしてくれるのでユーザーは上限でなければ気にせず画像をアップすることができます。トリミングと同じく解像度を変えるというのもDPIの知識も合わせて以外に難易度が高く普通のPCにはソフトが入っていません。

管理画面がシンプルでいいよね

これはconcrete5は権限設定が細かくできるので、私がユーザーの管理画面には余計なものは表示させないようにしているためです。
使いたい人には全部権限を渡すが、経験の少ない方には最初は必要最低限で段々と増やしていくようなサイトの一緒に成長させていくことができます。
しかも権限のコントロールなどはコードを書かずに設定できるところがいい。少し多くて大変ですが。

雑感

キャッシュやワークフローなどは、ある程度リテラシ−のある方が評価されるポイントで運用してみないとよくわからないというのが本音でファーストインパクトは受けられない方が多いようでした。
属性が追加できる事や、データオブジェクトによる柔軟性も形になって見えてこないとピンと来ない方が多かったです。
多言語に関しては、他のCMSの経験がある方などからは評価されますが初めての方はそもそもこれが標準でできる事がいい事かどうか?この機能で十分なのかどうかの判断基準がわからない事が多かったです。
全体的に画像のアップやブロックの挿入でドラックドロップなどのシンプルな操作が多いのは総じて高評価されます。
リニューアル案件などでは、前任者がやめて使い方がわからないなどの場合も多く、学習コストは以外に選択の中で大きなウェイトをしめる場合が最近特に多いように感じます。

そういう意味では使い方から、運用の仕方を広く認知させていくことでconcrete5のユーザーが増えるように思っています。

おまけ

pictronで日本語でアドオン紹介するc5addon.comをさぼりながら運営しています。そこで最近紹介した俺的ベスト3です。

1.ユーザーの操作に応じてSlackにメッセージを送る?
2.テーマ独自の入力項目を管理画面に設定する。
3.Chart.jsとGoogleスプレッドシートでグラフを作成する?

です。

D2D Skecth Community Kansai kick off meetup in kyoto 2017/11/22(水)

Share on FacebookTweet about this on TwitterShare on Google+

D2Dで2017/11/22にGYAZOSCRAPBOXなどのサービスを展開する京都のNOTA inc.様のオフィスを提供していただき、休日前の平日の19:00から開始しました。


これからSkecthを導入しようとと思っている方や、すでにかなり仕事で使いこんでいる方まで11名の参加者で開催しました。
会場の段取りやNOTA inc.を紹介してくれたフリーランスのウェブデザイナー完山君に感謝です。

このmeetupは、Skecthはこれからコミュニティが大事になると思い、忙しくても年内に顔合わせだけでも1度ミートアップをやりたかったという意図で開催しました。

最初に私事杉山がSkecthの概要を話しました。
まずは他のグラフィックツールとの開発マインドの違い、特にSketch 43でのデータフォーマットの変更により開発者へのアプローチやコラボレーションツール、プロトタイピングツールなどへの拡散がすごい!という話。


コラボレーションツールの例としてZeplinの実際の共有例と、TrelloやSlackへの連携の話をしました。
またデザインフォーマットとしてリソース共有をはかる意図を意識すれば新機能の意図が見えてくるという内容で、スマートリサイジング、シンボル、ライブラリーなどの簡単な解説をしました。
まとめとしては、広く深く拡散していくSkecth周りの情報は個人で網羅するには無理がありコミュニティは超大事だということをお話しました。

そして次が、今回のもう一つの目的GAYZOの中の人の話ということで、NOTA inc.のUIエンジニアである吉原さんに普段のワークフローでのSkecthの利用シーンや課題なども見せてもらいました。


自社サービスのUIをデザインしていく過程でプロトタイプからリリースまでのシュミレーションとモックアップの使いどころの課題など大変興味深い話が聞けました。
定番アドオンのCRAFTからinVisionでのプロトタイピング。ただ、そこからプロダクトにしていくためには、ある段階からはやはり課題部分だけでも構築していかないとダメだというような貴重な経験談もお話頂けました。

休憩をはさんで、情報交換と雑談。

定番の以下のようなサイト

Design + Skecth / Skecthの情報のポータルサイト
https://medium.com/sketch-app-sources

Skecth APP SOURCES / Skecthのフリーリソース配布サイト
https://www.sketchappsources.com/

symbol-organizer/シンボルを名前や階層で整理して並べてくれるプラグイン
https://github.com/sonburn/symbol-organizer
※未使用シンボルの削除も付いているのをスピカあやかさんに教えてもらいました。

Abstract / コミットやブランチなどもできるコラボレーションサービス
https://www.goabstract.com/
※試してみましたがシンボルも把握してくれてブランチも切れます、ただところどころ開発中な感じですが今後が楽しみです。

Protoship Teleport / WebページをSketchファイルにするプラグイン
https://protoship.io/tools/teleport.html
※紹介してくれたスピカあやかさんが後日ブログで紹介されています。
https://in.spicagraph.com/sketch/protoship-teleport/

シンボルの使い方も質問が出たりと、アットホームな雰囲気の会場のおかげで気さくなミーティングができたと思います。


来年もやっていこうと思います。セミナールームも施設が整ってていいのですが、実際のオフィスでやるとアットホームな雰囲気で良かったです。これからも、このようにできればいいなと思います。
うちの事務所貸すよ!という方々がおられれば是非お声がけください。よろしくお願いします。

第2回 concrete5 神戸勉強会 in 大阪「知っててよかったアドオン特集・ページリストブロックをたっぷりあれこれ入門」

Share on FacebookTweet about this on TwitterShare on Google+

Concrete5ユーザーグループで7/22日に大阪は十三のJuso Coworkingをお借りしてセミナーを開催しました。

当日は告知が急だったので(猛省)少ない人数で、ほっこりと開催しました。
また神戸ユーザー会ですが、最近大阪での開催が少ないために大阪で開催というよくわからない会になってしまったかもしれません。

今回はConcrete5の基本的な導入に触れるための内容を自分達の資料作成とテストも含めてやってみるということで開催。なかなか日常でイベントを作らないと手を動かさない自分もいるので日程をアサインして資料を作るという意味も込めての決定です。

アドオンやページリストの基本的な使い方をまとめるのは導入で何回やってもいいと思いますので、今回の内容をブラッシュアップしていって、オートナビなどの基本的なブロックの使い方なども合わせてこれから何回も同じ内容で開催してもいいのでは?と終わってから話しました。

まずはおなじみ情報収集のリンク

コミュニティ&情報収集

concrete5ジャパン

concrete5関西ユーザーグループ

最初はconcrete5のアドオンの始め方と、いくつかアドオンの紹介を私がいたしました。スライド以外のアドオンもいくつか口頭で紹介しました。
Block DesignerやAfixia Login Redirects、Chartsなどの有料アドオンも操作画面を見せて紹介しました。


次のページリストの使い方はconcrete5で無償テーマを公開されている中根さんが、コメント意味やサムネールの呼び出し方、ベースの表示からテンプレートのカストマイズの入門まで紹介してもらいました。


終わってからはざっくばらんな質問コーナーになりまして、concrete5でのサイトのアップデートの際の留意点、バックアップの方法、データベースのバックアップ、リストアなどなどいろいろな話ができました。

先日のバージョンアップしたバージョンの事を少し茶飲み話程度にして時間切れとなりました。

今回は十三コワーキングで行ったのでキッズスペースがあるので、お子様連れでもご参加頂きました。

女性の方は女性中心のConcrete5 Kansai Girlsも随時開催されていますので、是非一度参加してみてください。

また流浪の民のようにいろいろ会場を探していますので、特に神戸でうちのセミナールーム使っていいよ!という方は私にご一報を。

第1回concrete5神戸勉強会「バージョン8ではじめるconcrete5とStuccoテーマ入門 対象レベル:初心者」レポート

Share on FacebookTweet about this on TwitterShare on Google+

Concrete5ユーザーグループで5/27日に三宮のコワーキングスペースcolocoでセミナーを開催しました。

1ヶ月近くも前の話ですっかりレポートあげるの忘れてました、すいません。

当日は、定員25人ほぼ満員で開催できました。ありがとうございます。

メインの前にまずは初心者向けということで、私こと杉山がざっとConcrete5.8の概略を解説。

まずは情報収集のリンクなどを紹介

コミュニティ&情報収集

concrete5ジャパン

concrete5関西ユーザーグループ

テスト環境構築

一般的なインストール

MAMP & MAMP PRO

cloud9

その他

c5addon.com
アドオンの紹介とレビューのサイト

あとは、テストサイトを操作しながら、concrete5のエリア、ブロック、レイアウト、ページタイプなどの基本を実際に動かしながらダイジェストで解説しました。

第2部はconcrete5の配布されているテーマでダウンロード上位のテーマ「Stucco(漆喰)」を制作されたデザインワークスオンサイドの中根さんからStuccoを使ったサイト制作を解説して頂きました。

当日はconcrete5.orgへの登録からダウンロード、カストマイズのポイントなどを紹介していただきました。

Stucco
http://www.concrete5.org/marketplace/themes/stucco

Stuccoデモサイト
http://stucco.onside-lab.com/index.php/ja

同じく中根さんが作られたフリーのテーマ第2弾『Palette』がマーケットプレイスにて公開されています。
http://www.concrete5.org/marketplace/themes/palette

Paletteデモサイト
http://www.onside.com/la_palette/

当日のスライドはこちら

質疑応答もいくつか質問が出て、距離感が近い感じでできたのでは?と思っています。
神戸のユーザー会をスケジュールにめげずにやっていきたいです。

PageListオブジェクトとPage Selector Attributeでページの相互連携をササッと作る

Share on FacebookTweet about this on TwitterShare on Google+

この記事はconcrete5 Japan Advent Calendar 2016の19日目の記事です。12日の記事はtomoya.phさんのconcrete5.6.x の逆襲!です。
concrete5.7.*でPage Selector Attributeを使ってページの相互連携は以外と簡単だったという話です。

プログラムを書ける人には、なんだそれ?って話かもしれませんが、フロントエンドやデザインの人はこんな事でも役立つかと思います。
自分が調べた事を残しておくようにconcrete5のアドオンを日本語紹介するサイトを作っています。

http://c5addon.com/

年末は追われて更新が滞ってますか..(汗)
さて、このサイトまずアドオンの紹介をほぼconcrete5.orgと同じような内容で日本語の少し解説をつけて「アドオン(addon)」というページタイプで作っています。

http://c5addon.com/addon/tweet-feed-1

それとは別に「レビュー(review)」というページタイプで機能の紹介ページを作成しています。

http://c5addon.com/review/twitter

別にした理由は、1つのアドオンに対してレビューを複数作る場合があるためです。
思いついた時に使うシーンごとに追加できるようにしたかったのと、これから複数のアドオンを使ったレビューも想定されるからです(ほんとにやれよ俺!)。

こんな感じの構成です。

flow

レビュー側には、どのアドオンの事なのかアドオンのページへの連携がされています。
page_selector_attribute_iconこれはPage Selector Attributeを使っています。

Page Selector Attributeはページ選択を属性(Attribute)に追加できるアドオンです。

ページとテーマの属性メニューを選択

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-11-11-44

「レビュー(review)」というページタイプに使用アドオンという属性を追加します。
そうすることで、他のページへの連携をコンポーザーや属性設定からサイトマップで選択することが可能です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-11-14-09
リンクした情報はページIDで保持されるために、ページの階層を移動しても問題ありません。

さて今度はアドオン側にこのアドオンに関わるレビューを出したいわけですが、これもPage Selector Attributeで設定していってもいいのですが、せっかくレビュー側でリレーションを貼っているのでだから、それを使えないの?と思いました。
つまりPage Selector Attributeで自分を設定したページをページリストで自動で検索するという事です。
そこで、下記のページリストオブジェクトの記事を参考に

http://concrete5-japan.org/help/5-7/developer/working-with-pages/searching-and-sorting-with-the-pagelist-object/

PHPなんちゃっての私でもconcrete5のPageList オブジェクトを使えば、こんなのでいいの?ってコードでできちゃいました。

flow_connectこういう構成です。
concrete5の構造の恩恵を受けれるありがたみです。

$page = Page::getCurrentPage();
$list = new \Concrete\Core\Page\PageList();

まずは今のページのオブジェクトを$pageに格納します。この$pageで様々な現在表示しているページの属性を取得できます。
次に$listというページリストオブジェクトを作成。この時点ですべてのページのリストを表示するオブジェクトです。ただし実際に検索をかけているわけではありません。実行したら、そうなるよという事です。

$list->filterByPageTypeHandle('review');

次にレビューのページだけが対象なので、ページタイプのハンドル名でフィルターをかけます。これでレビューページだけのリストになりました。

$list->filterByAttribute('use_addon', $page->getCollectionID());

そしてPage Selector Attributeで作った使用アドオンという属性が自分のページであるページを絞り込みます。filterByAttributeは属性で絞り込みをかけるもので、使用アドオンのハンドルタイプをuse_addonにしましたので、その値に$page からgetCollectionID()でページIDを入れます。
sortByPublicDateDescendingで日付の降順でソート。
最後にgetResultsで実行してページリストのデータを取得します。

$list = new \Concrete\Core\Page\PageList();
$list->filterByPageTypeHandle('review');
$list->filterByAttribute('use_addon', $page->getCollectionID());
$list->sortByPublicDateDescending();
$pages = $list->getResults();

全部書いてもたったこの5行で、それだけのデータが取得できます。すごいですね〜PageListオブジェクト。
あとは

foreach ($pages as $reviewpage):
echo $reviewpage->getCollectionName();
endforeach;

などでデータを表示できます。
リンクをそれぞれのページオブジェクトから取り出すのは、ヘルパーが用意されています。

$nh = Loader::helper('navigation');//ナビゲーションヘルパー
//
//
//
foreach ($pages as $reviewpage):
$hrf = $nh->getLinkToCollection($reviewpage);//リンクのURLを取得
$pname = $reviewpage->getCollectionName();//ページ名を取得
endforeach;

Loader::helper(‘navigation’)でナビゲーションヘルパーで、getLinkToCollectionでページオブジェクトからそのページのリンクするURLの属性を抽出できます。
ページ送りを表示するのも標準的なコードであれば、コードを書く必要はありません。

$pagination = $list->getPagination();
if($pagination->getTotalPages() > 1):
print $pagination->renderDefaultView();
endif;

getPaginationでリストからページ送りのオブジェクトを取得。getTotalPagesでもしページ数が1ページ以上なら、renderDefaultViewでページ送りのコードを表示する。
あとフロントエンド側のCSSでいかようにも装飾できます。

Page Selector Attributeで選ばれたページを検索するという使い方は、まだまだ利用価値があると思っています。
是非活用例など、他にあればどんどん教えてください。

明日12/20はfujigoco2255さんです。インフォグラフィックとな!楽しみ楽しみ。

D2D WEBグラフィックツール デザインワークフローの転換 v2.0 Note 2016/7/23(土)

Share on FacebookTweet about this on TwitterShare on Google+

D2Dで7/23にOBPアカデミアで開きました「D2D WEBグラフィックツール ?デザインワークフローの転換?」のレポートです。
当日は真夏の日照りにもかかわらずキャンセル待ちも出て30名以上の方が参加していただきました。
会場のOBPアカデミアは新しくとてもきれいで、晴れ渡る窓からは大阪城がきれいに見えました。

IMG_0276

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
https://d2draft.doorkeeper.jp/

簡単な当日のタイムスケジュールを説明し挨拶が終わったあと、最初に登壇いただいたのは前回も登壇してくれた京都で活躍するフリーランスのウェブデザイナー完山さん。完山さんは、前回の内容を聞いてからSkecthに移行した話。
「Sketchに辿り着いた話と、制作フローにおける各ツールの連携」というタイトルで話をしてくれました。

IMG_0278

以前から気になっていたSketchを前回のワークショップの情報交換から積極的に使い始めて、今までのワークフローからSketchのたどり着いた理由や制作中に使うツールや進める上でのポイントなどを紹介してくれました。SketchのプラグインCRAFTでプロトタイプコンテンツを効率的に作る解説など、実際の画面で操作しながら具体的に紹介してもらいました。

詳しい資料はこちらをご覧ください。
https://dl.dropboxusercontent.com/u/22613663/d2d/d2d_designworkflow_vol2_motoyama.pdf

2人目は大阪で活躍するフリーランスのウェブデザイナー飯田さん。「10年前から変化ナシ?!新技術を使えなくてもなんとかなるさ!基本の制作ワークフロー」

IMG_0281

飯田さんは制作事務所などから依頼を受けてランディングページやデザインからコーディングまでを制作されているフリーランスです。
メインはPhotoshopでスライス書き出しでwindowsベースで仕事をされています。クライアントがあるものですので、ネット上ですべてを公開できないのが残念ですが、デザインのクオリティが高くツールやプラットフォームがデザインクオリティをあげるのではないとよくわかりました。お仕事に配色やマージンの緊張感があり、是非お話を聞きたくてお願いしました。

詳しい資料はこちらをご覧ください。

http://www.pictron.net/d2d/20160723/all.pdf

3人目はクオリティの高い演出のコンテンツを制作している宇都宮ウエブ制作所から宇都宮 頼子さんに登壇いただきました。
人気ブログおなじといっしょの作者でもあるのでスライドにはおなじみにキャラクターがたくさん登場するほっこり楽しいものでした。

写真 2016-07-23 15 12 03

FlashのiOSでの非対応から動きのあるFlashでの演出をウェブで見なくなってから時間がたちますが、AdobeがFlashという名前を捨ててAnimateCCとなりましたが、少し前のFlashのバージョンからCanvas+CreateJSでの書き出すことでプラットフォーム間での違いを意識せずに作れるようになりました。
これを使えばデザイナーでも複雑なcanvasの記述などを一から記述しなくてもページの演出を作成できるという内容を実例を交えて解説してくれました。

また2次元ビットマップをボーンとメッシュでアニメーション化するSpineというツールでイラストの動きを演出、AnimateCCと連携して仕上げる流れを解説していただきました。
動きと言えばパララックスに飽きた人はチャレンジしてみてはどうでしょう?

詳しい資料はこちら

当日のスライド

最後に私こと杉山がフジロックに行けない事でヤケになって発表しました。

写真 2016-07-23 15 51 40

京都でやった第一回の話を聞けなかったという事で大阪で2回目を開催したこともあり、一回目のダイジェストをざっとやって、あとは最近更新された、Skecthの新機能などを紹介しました。

AdobeのextractでなぜかBracketsとCloudからのextractがなくなり、Cloudと別サービスになるかもしれないという懸念が否定できませんね。

Sketchのレスポンシブデザインを考えたスケーリングの属性指定が追加され(これけっこうスゴイと思ってるのにフューチャーされ方が少ないと思う)、今までのグラフィックツールと考え方を変えないとダメなように思いました。
完山さんが解説してくれたCRAFTでのコンテンツのプロトタイプデザイン制作ですが、CRAFTのバージョンアップで追加されたJSONなどを読み込んでフロントエンドデザインなどを考えるための機能追加を解説しました。

当日使ったスライドはこちら

https://speakerdeck.com/pictron/webdesign-workflow-dot-key

みなさんの登壇のあとは、30分ほどの質疑応答と来場者の方から出された疑問やお題をみなさんでディスカッションしました。
いろいろと質問が出て、おおむね好評をいただいたように思います。

またウェブのデザインを主題にしたワークショップが少ないのでまたやって欲しいという声も複数いただいたので、是非また調子に乗って開催できればと思います。

DojoCon Japan 2016

kintone cafe Vol.5 開催レポート

Share on FacebookTweet about this on TwitterShare on Google+

2016年6月10日(金)19:00〜株式会社神戸デジタル・ラボさんのセミナールームをお借りしてkintone cafe kobe Vol.5を開催しました。

kintoneとはサイボウズが提供するビジネスアプリ作成プラットフォームkintone cafeは全国で開催される勉強会コミュニティです。神戸では5回目の開催となります。

まずはkintoneエバンジェリストの細谷さんのkintone cafe kobeの簡単な紹介があり早速セミナーへと入っていきます。

まず最初はkintoneエバンジェリスト細谷さんからkintoneとメールワイズの連携についての発表。

IMG_0264
kintoneでメンバー管理などを行う際に、複数のユーザーへのメールの一斉送信などを同じサイボウズのメールワイズを使いスムーズに行えるという実例を簡単なサンプルと共に紹介されました。
他にも有料のものでセンドグリッドなどもありますが、メールワイズはkintoneの管理画面にデフォルトでプラグインが用意され、インストールすればすぐ使えると言うことです。

続いてはkitone developerコミュニティで記事を見た人も多い同じくエバンジェリストのjoyzo 山下さんからガジェットとkintoneを連携したアプリの紹介をしていただきました。

IMG_0265
kitoneとは?という丁寧な基本の説明から、一気にハイエンドな実例の紹介に。
前日のkintone hiveで行ったデモのダイジェストをkintone cafe kobeでも見せてくれました。
HackeyJINS MEMEなどの新しいガジェットをクラウドサービスやスマートフォンと連携してkintoneと使うデモを紹介してくれました。

次は神戸デジタルラボの山下さんが「kintoneで情シス業務を高速化したい」という題目で紹介してくれました。

IMG_0266

普段は自社の社内システムを管理している山下さんはプログラマーではないが、自社業務の効率化のために、kintoneやslack、REST APIなどを使い業務フローを改善。
また検索を効率化するため自ら独自の検索インターフェイスを作成。さらにこれから仕事の効率化にどんどん使えるとおっしゃっていました。プログラマーではないと本人はおっしゃていますが、スキルは高いように思います。

4番目に発表したのはサイボウズの竹内さん。

IMG_0267

最近作られたアプリの紹介をして頂きました。
まずはサイボウズ社内で使ってるkitoneで作成した日報アプリの紹介。
実際にデモを動かしながらアプリの構成、レコード集計のカストマイズ、REST APIの使いどころなどを紹介しれくれました。
最後にはkintoneインターフェイスのリニューアルの話です。2017年2月の旧デザインの利用停止までのタイムスケジュールをアナウンスして頂きました。
タイムスケジュールに関して詳しくはこちら?

5番目はアールスリーインスティテュートの浅賀さんから、こちらもkitone hiveで発表された内容を含むアールスリーインスティテュートでのkintoneでの制作例などを紹介いただきました。

IMG_0269
特にkintoneにない部分で、運用面で求められる要求をAWSなどのクラウドサービスやガジェット連携、IoT連携などの様々な手法で課題解決を行ってる例を紹介して頂きました。

最後にkintoneエバンジェリスト細谷さんからkintoneとWordPressを使った開発事例についての紹介がありました。

IMG_0270
WordPressは非常に多く普及するウェブのCMSシステムですが、すでにkintoneとの連携プラグインがあり、連携が容易であることなどを実例をまじえて紹介してくれました。

発表の後は、みなさんから様々な質疑応答の時間。
フリーの開発者、企業の中での業務担当、ウェブ制作者など様々な立場からの質問がありオープンな雰囲気でお話ができました。

終わってからは、軽くピザをつまみながらアルコールも入れつつ懇親会。kintoneを自分の業務で使う人、kintoneを仕事にする人、kintoneを学びたいと思っている人、いろいろな人が気軽に交流できる会で、是非興味のある方は気軽に参加してみてはいかがでしょう。

開催情報はこちらで公開します。

https://kintonecafe-kobe.doorkeeper.jp/

コミュニティに参加ボタンでお知らせが来るようになります。

 

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

Share on FacebookTweet about this on TwitterShare on Google+

D2Dで4/2に京都コワーキングスペースcoto(コト)で開きました「WEBグラフィックツール今昔 ?デザインワークフローの転換?」のレポートです。
当日は花見日よりにもかかわらずcotoの定員に近い26名の方が参加していただきました。

P1000094

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
https://d2draft.doorkeeper.jp/

簡単な当日のタイムスケジュールを説明し挨拶が終わったあと、最初に登壇いただいたのは

Illsutratorでのウェブデザインワークフロー例の紹介
川井昌彦(Cherry Pie Web

P1000091

以前はFireworksを使っていた川井さんは現在はIllustratorを中心にデザインをされているという事です。
実際に仕事で使ったデザインデータを見ながら解説していただき非常にわかりやすかったです。
IllustratorでWEBデザインをする際の初期設定や、文字スタイル、段落スタイル、グラフィックスタイル、グローバルカラーを活用しCSS的な考え方でIllustratorのデザインをしていくというところは以外と昔からIllustratorを使っている人が活用していない使い方で是非印刷系の方に見て欲しい内容でした。
印刷の経験も長い川井さんの視点が大変参考になりました。

詳しい資料はこちらをご覧ください。
http://prezi.com/mojhh25kig3u/?utm_campaign=share&utm_medium=copy

2人目は京都で活躍するフリーランスのウェブデザイナー完山さん。完山さんも実際に納品したデザインファイルを例に解説してくれました。

DSC02119
完山さんはIllustratorでデザインレイアウトをした後、Photoshopに書き出すファイルを持っていきアセット管理でデータを書き出す流れで主に制作しているということです。
制作の途中でのクライアントとのコミュニケーションに便利な様々なツールや画像圧縮に便利なツールなどの紹介もしてくれました。クライアントとのコミュニケーションに後で紹介するプロトタイピングツールを使ってスムーズな確認を行っているところも含めて、フリーランスでデザインから構築までをクライアントと近い距離感で仕事をしている完山さんらしいワークフローで役立つ実践的な内容でした。

詳しい資料はこちらをご覧ください。
https://docs.google.com/presentation/d/1ipdFr4nN0gbHdiJvKLV2LVcISAvMGbrmXSbCvfNaA-8/edit#slide=id.g1289d4a935_2_156

最後に私こと杉山が発表しました。

DSC02134

これからのデザインワークフローの話をしました。

ウェブデザインフローについて昨年あたりからコラボレーションサービスやプロトタイプサービスがリリースされ、デザインするアプリケーションやフォントを持っていないプログラマやコーダーといかに制作をスムーズにすすめるかにいくつかの答えを提供しています。
そのベースとなるフォーマットの多くがPhotoshopとSkecthになっている。その2つが標準になりつつある理由は、2つのソフトのデータフォーマットがオープンであり、アプリを所有していなくてもCLIやJavascript,Rubyなどからレイヤーや画像が取り出せるインターフェイスが用意され、それを元に開発されたサービスが数多くリリースされているという理由です。
そしてカンバセーションツールを各サービスが自前で作るのでなくSlackにつなげるようになっている傾向である事を話しました。
これからのデザインツールもベンダーが1社ですべてを開発するのではなくオープンでつながる事がキーになってくるということです。
そしていくつかコラボレーションサービスを実際に操作して紹介しました。

当日使ったスライドはこちら
webdesign-workflow.pdf

3人の登壇のあとは、1時間質疑応答と来場者の方から出された疑問やお題をみなさんでディスカッションしました。

ウェブ系のワークショップは技術系のものが多く、デザイン系が少ない気がするのでまたやって欲しいという声も複数いただいたので、是非また大阪や神戸でも調子に乗って開催できればと思います。

wordpress AMP Pluginは入れただけではダメ。functions.phpにフィルター追記を忘れずに

Share on FacebookTweet about this on TwitterShare on Google+

いつのまにか、Googleさんがどしどし進めて検索にも反映されたAMP – ACCELERATED MOBILE PAGES PROJECT。

Googleウェブマスターにも項目が追加され「まだやってないの?」感の圧をかけてきます。

amp01

以前D2Dという勉強会でキックオフをやりました。
http://www.pictron.net/2015/11/02/d2d-amp-workshop-v1-0-note-2015113%EF%BC%88%E7%81%AB%EF%BC%89/

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
http://d2draft.net/

これに対応する現実的な手法として提供されているのがWordpressの開発元であるautomaticからリリースされているWordpressのAMPプラグインでカノニカルタグで指定する別ページを自動生成するという手法です。
このプラグインの0.1をテストサイトに入れていたのですが、知らない間に0.3.1になっていました。いつものプラグインのようにバージョンアップ出てこない……
中身もだいぶ変わっている……
https://wordpress.org/plugins/amp/

このプラグインをインストールして、ダッシュボード見ても設定も何もありませんので、とりあえずこれだけでいいのかな?と思ってしばらくしてGoogleウェブマスター見ると

AMPのエラーを修正してください。

との事。
Google Developers データ構造の確認ページでampページのURLを入れて確認します。

https://developers.google.com/structured-data/testing-tool/

そうすると

amp02

logo 必須プロパティの欠落

と出ています。
原因を調べるとPluginフォルダの中にあるマークダウンファイルに記述がちゃんと書いてありました、このプラグインは管理画面の設定などはなくfunction.phpにフィルター追記で設定していくというデザイナーには目頭が熱くなる仕様なのです。
開発がどんどん進んでいる過程だからかもしれませんけどね。

このマークダウンは
https://github.com/Automattic/amp-wp
でも見れます。

そこでまずエラーを回避するために最低限いれないといけないのが、メタデータのロゴ指定

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => '指定のロゴURL',
		'height' => 41,
		'width' => 164,
	);
	return $metadata;
}

ページのテンプレートはプラグインのフォルダのtemplatesのフォルダにはいっています。

amp04
このテンプレートファイルを自分のテーマ内で上書きするためには、この中のsingle.phpを自分のテーマ内に任意の名前で複製します。仮にmy-amp-theme.phpとします。

add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

function xyz_amp_set_custom_template( $file, $type, $post ) {
if ( 'single' === $type ) {
$file = テーマのパス. '/my-amp-theme.php';
}
return $file;
}

で、カスタムテンプレートを使います。
カスタムテンプレート内でヘッダーに表示されるアイコン画像は$site_icon_urlで呼び出していますが、これは

add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
// Ideally a 32x32 image
$data[ 'site_icon_url' ] = '指定のロゴURL';
return $data;
}

で指定します。

ここまで指定しました。

amp03
これでデータ構造の確認ページで確認すると問題がないようなので、とりあえずこれで進めてみます。

他にもCSSやFeatured Imageなどマークダウンファイルにfunction.phpへの追記のコードがあるので、また試してみます。

一番下部にAMPページのGoogle Analyticsのトラッキングコードの追加のコードが記述してあります。
WP Total hackなどで入れているトラッキングコードはAMPページには追記されませんので、自分でamp_post_template_analyticsフィルターで追記します。

この中で

‘apikey’ => ‘YOUR APIKEY GOES HERE’,

となっているところは、
https://developers.google.com/

でAnalyticsのAPI KEYを取得して入力します。

前回のイベントはあまり人が集まりませんでしたが、今度やったら少しは集まるかな?

OS X El Capitan で Fireworks データをとりあえず立ち上げてPhoshopに保存しなおす。

Share on FacebookTweet about this on TwitterShare on Google+

MacでOS X El CapitanにアップデートするとFireworksが立ち上がらなくなります。フォントキャッシュとかいろいろ対策をしても安定して動作するとは言い難く、次のバージョンではレガシーのJava Runtimeは非対応となるため環境はPhotoshopかSketchに以降するべきでしょう。

個人的には寂しい限りです、大昔に1冊本を書いたくらいお気に入りのツールでした。
Fireworks Web Parts Design

ただ過去のデザインソースの資産や修正が来たときにリソースを作り直すのは面倒です。

現状のFireworksPNGファイルをそのままPhoshopCC2015で開くと1枚の統合された画像になってしまいます。

幸いFireworksはドキュメントで使われているフォントがインストールされてなくてもプレビュービットマップは表示され、適用フォントも変更されません。

ですので、とにかくファイルを開いてFireworksからPhotoshop形式で保存すればレイヤーも保持され、ベクターはパスとして、マスクはビットマップマスク、テキストも編集できる状態で保存されます。これは一番リソースとして利用できる状態になります。

これを目指す工程をひととおりやってみましたので書き残します。

まず動作環境でJava 6 ランタイムが必要ですのでダウンロードしてインストールします。

いろいろ調べてフォントキャッシュのクリアや使用するフォントを制限して立ち上がるという記事も見ましたが安定動作しませんし、フォントを限定して使うのは現時的には非効率なのですべてオフにして立ち上げて書き出すだけにします。

スクリーンショット 2016-02-13 15.23.38

フォントブックを立ち上げます。

スクリーンショット 2016-02-13 15.24.46

コンピューターのところで右クリックし“コンピューター”を使用停止を選択。

スクリーンショット 2016-02-13 15.28.25

フォントが「切」の状態になってからFireworksを起動します。

スクリーンショット 2016-02-13 15.29.32
ファイルメニュー>別名で保存を選択します。

スクリーンショット 2016-02-13 15.32.15

保存するファイル形式でPSDを選択します。

スクリーンショット 2016-02-13 15.33.06

オプションをクリックして「外観よりも編集性を保持」を選択してOKをクリックします。

スクリーンショット 2016-02-13 15.33.25

編集性を保持にするとフィルターなどもほぼコンバートされ、テキストもテキストとしてレイヤーも保持されるのでリソースとしてフォントもインストールされたものを使っていればそのまま使えます。

スクリーンショット 2016-02-13 15.42.49

Photoshopにないフィルターや一部の線などが画像になります。点線がコンバートされない事があるので、実線でコンバートしてPhotoshopで点線にし直す必要がある場合があります。

ただ過去の素材を再編集して切り出すだけならスライス設定もPhotoshopにはそのままコンバートされます。ボタンをスライスのまま保存してるみたいな事ありますよね。

fire

Fireworksのスライス設定。

psd

保存し直したPhotoshopのスライス。

グラデーションなども、そのまま来ますし更新用として使うにはほぼ問題ないと思います。作り直しがライン関係がほとんどえすね。これはAiから持って来ても同じです。