CSS Nite in Sendai vol.10に参加してきました

2018年11月17日(土)、仙台市青葉区本町にある専門学校デジタルアーツ仙台で開催されたCSS Nite in Sendai vol.10(外部サイトに移動します)に参加してきました。
仙台でのCSS Niteは、前回の開催から約3年ぶりのようです。
先にCSS Nite in Sendaiに参加してみての寸感を書くと、Adobe XDによるワイヤー製作ソフトの解説やWebライティング、SEO、アイデア出しなど、半日ディレクター寄りの内容を満喫できて楽しかったです。
名刺交換された方での判断になりますがディレクター職かそれ以上の方が結構居ましたが、中には学生のかたも参加していたようです。
協賛のロジクールさんのキーボードとマウスのプレゼントがあったのですが、ジャンケンで負けました…。

  1. 基調講演:時代を読む目を養おう(+ Adobe XDの基本と応用、アドビ最新事情)
  2. フォントの動向、そして、テキストまわりの表現のトレンドまとめ
  3. アイデア出しが苦手な方は必見! アイデアを大量に出しまくる『田口流 アイデア発想法』
  4. 検索エンジンとユーザーから評価される、読み手に寄り添うWebライティング
  5. フォーム機能やPWAサポート機能も搭載したメンテナンスフリーなウェブサービス型CMS MovableType.netをご紹介

基調講演:時代を読む目を養おう(+ Adobe XDの基本と応用、アドビ最新事情)

登壇者: 鷹野 雅弘さん(スイッチ)手描きスケッチからHTMLコードを自動生成してくれるマイクロソフトの「Sketch2Code」、Adobe PhotoShopのデバイスプレビュー、Design Spaceがいつの間にか機能が無くなっていた話、Adobe XDについての機能や全体像についての紹介、ほかプロトタイプ、マイクロインタラクション、アドビの動向についてなど色々なお話をされていました。

ワイヤーフレーム作成ができるAdobe XDですが、私の場合は仕事をする際、お付き合いのある会社も使っている割合が結構高く、元ファイル(.xd)をやりとりするケースも何度かあったりしています。XD使いがまわりにいるとやりとりがラクですね。
Adobe XDは無料で使えるスタータープランがある事もお話されていました。
(スタータープランについては、前にちょっとだけブログに書きました)

Adobe XD 無料スタータープランを試す|UI/UXデザイン プロトタイプ作成ソフト|インストール編
Adobe XD は、WebサイトのプロトタイプやUI/UXデザインが作成でき、共有まで行えてしまうツールです。XDは、Adobe Creative Cloudを契約していれば使えますが、Adobe CC未契約の場合でも無料プランが使えるようになったので試してみます。まずAdobe XD CC体験版ダウ…
https://sendai-kuraso.com/work/system-web-director/post-334.html

フォントの動向、そして、テキストまわりの表現のトレンドまとめ

登壇者: 鷹野 雅弘さん(スイッチ)、関口 浩之さん(フォントおじさん/Webフォント エバンジェリスト)「フォントおじさん」こと関口 浩之さんと鷹野さんの2名によるセッション。
書体や文字間によるイメージの違いを実際に例を挙げての説明や、ある企業だと画像文字を使わないようにしている等、Webフォントの動向についてやWebフォントサービスの紹介。
実際にヘッダーにJS設置、CSSのfont-familyにWebフォントを記述して設定手順の説明や、設定したページの表示速度を見るデモなど。
デモでは「FONTPLUS」のサービスを使用していたのですが、ページ読み込み開始からWebフォントが適用されるまでの表示速度が思っていた以上に速かった。
あと、とにかくお二人の掛け合いがとても面白かったです。
関口さんが昔あったタイプライターについて話を出したのですがとある機能については鷹野さんのほうが詳しくてうまくフォローしていたり、絶妙でした。フォントについての熱い想いが伝わってきます。

アイデア出しが苦手な方は必見! アイデアを大量に出しまくる『田口流 アイデア発想法』

登壇者: 田口 真行さん(株式会社デスクトップワークス)アイデアを大量に生み出す「田口流 アイデア発想法」をテーマに、講義、会場の参加者が前と後かたで組んでのワークショップを行いました。
ワークショップは、(何故か!?)会場の天井にぶら下がっていたシャンデリアをネタに「もしも○○○だったら」このシャンデリアはどんなストーリーで展開されるか…等という感じに、お題をもとにアイデアを生み出すキッカケをつかむ事をしました。
アイデア出しを行うブレストは、ひとつの正解を追うことよりもアイデア数を出すことが重要で、それを行う事で視点を増やすことができるそうです。また、ターゲットユーザーのモデルとなる人物像を具体的にイメージする「ペルソナ」についてのお話がありました。
また、当日会場では田口さんが開発したWebディレクター向け支援ツール「Webディレクター手帳(外部サイトに移動します)」や執筆した書籍「ディレクション思考(外部サイトに移動します)」が特別価格にて販売されていました。

検索エンジンとユーザーから評価される、読み手に寄り添うWebライティング

登壇者: 松尾 茂起さん(株式会社ウェブライダー)松尾さんがプロデュースした「美味しいワイン」のサイトで、何故このコンテンツは1位で表示さるようになったのかを「父の日ワイン」で検索した場合のページを例に、記事を読み進めてもらえるための構成や、検索エンジンに好まれるための文体(言葉選び)はどうしたら良いか等SEOと読み手に寄り添うためのWebライティング手法について解説していただきました。
美味しいワインのサイト自体は記事数が三十数件(だったかな?)で記事数自体は多くないサイトなんだそうですが、googleで「ボジョレーヌーボー、赤ワイン、白ワイン」等の検索キーワードで、1位〜3位等の上位表示を獲得しているとの事。すごいですね!

美味しいワイン(外部サイトに移動します)
https://wine-good.jp/

フォーム機能やPWAサポート機能も搭載したメンテナンスフリーなウェブサービス型CMS MovableType.netをご紹介

登壇者: 早瀬 将一さん(シックス・アパート)サーバー不要の高速WebCMSサービスMovableType.netを使う場合のメリットや、MovableType.netフォームの紹介。
MovableType.netフォームは「フォーム機能」を単独で利用できるそうです。指定されたソースを貼り付けるだけなので、他のCMSやHTMLであればどこにでも簡単に設置することができます。
私がMTを使う場合は、お客様のサーバにソフトウェアをインストールしてカスタマイズする構築をする事が主で、ウェブサービス型のMovableType.netは使った事がありませんでした。
MovableType.netは好きなプラグインのインストールが出来ないという点と動的生成対応で再構築が不要というのが(再構築したい派なので)ちょっと残念ですが、CMSの動作が軽くサーバ管理しなくて良い事、ページ送り機能が標準で付いていたり、ウェブページを公開前に下書き状態のまま共有できる共有プレビュー機能、Webプッシュ通知機能(※要スタンダードプラン以上)やワークフロー機能(承認機能/※要スタンダードプラン以上)がいいですね。「制作者向け評価ライセンス」がスタンダードプラン相当の機能が試用できるようなので試してみたいと思います。

MovableType.netフォーム(外部サイトに移動します)
https://movabletype.net/form/
MovableType.net(外部サイトに移動します)
https://movabletype.net/
機能一覧 | ウェブサービス型高機能CMS – MovableType.net(外部サイトに移動します)
https://movabletype.net/features/list.html

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー

やまライダーです。仙台市でブロガー兼システム寄りのWebディレクターとして働きながら嫁と一緒に子育て奮闘中!
タスク管理ツール「Todoist」でガントチャートが作成ができる補助ツール「Todoist ガントチャートコンバータ」作者。
鳥が好きでキンカチョウ(錦花鳥)を飼っています。

プロフィールを見る
やまライダーのTwitter(自転車用アカウント)
やまライダーのTwitter(システム寄りwebディレクター用)
やまライダーのInstagram