CSS Nite LP64「Coder's High 2019」

クリエイター
カスタマイズ自由自在
KDDIウェブコミュニケーションズ
神森 勉

質問
ウェブサイトビルダーって知ってますか？

ウェブサイトビルダー•HTML、CSS、サーバーの知識なしで制作が可能•ソフトウェアのインストール不要で、ウェブブラウザで完結•WYSIWYGエディターによる見たまま編集•承認機能・時限公開のような複雑な機能はない•無料ではじめることができ、機能によって有料版の選択が可能•小規模サイトでの利用が多い傾向

FTP作業

CMSカスタマイズ

原稿作成
サーバー設定HTMLコーディング
CSS設計
ナビゲーション設計
CSSコーディング
ロゴ制作
コピー作成

写真撮影
ワイヤーフレーム
インターフェースデザイン

CMSインストール

ナビゲーション設計
ロゴ制作
原稿作成

コピー作成

写真撮影

制作者向けではない？

ウェブサイトビルダー

やっぱり制作者向けではない？

どんな人がつかってる？

ジンドゥーユーザーの職業

2014年当社アンケートデータ

ジンドゥーユーザーの業種

2014年当社アンケートデータ

ジンドゥーでホームページを持つ目的

2014年当社アンケートデータ神森 勉KDDIウェブコミュニケーションズ
広報室 室長
前職は制作会社でディレクター
某衛星会社のECサイト構築
某訪販化粧品会社サイト構築 他
大学卒業後は商社営業マン

告白しますジンドゥーが日本に来たとき全く眼中にありませんでした
ノーシェアでお願いしますｗコーディングできないから？

コーディングできないと思っていた本日のお話済•ウェブサイトビルダーとは？ジンドゥーにまつわる話•ウェブサイトビルダーを選ぶメリットとは？
•カスタマイズ可能なジンドゥークリエイターとは？
•まとめクリエイターに対する誤解

常時SSL、独自ドメインは使えない？

全てのプランで常時SSL対応
独自ドメインは有料プランで可能

スマートフォン表示に対応してない？

全てのレイアウトが、レスポンシブ対応していますSEOに弱い？

有料版ではページごとに詳細設定可能
構造化文書として作れるので問題なし

デザインのカスタマイズってできないでしょ？

独自レイアウトの機能あり
標準レイアウトもカスタマイズ可ジンドゥークリエイターでもできます•全プラン常時SSL対応済み

独自ドメインは有料プランで可能•独自レイアウト機能有り

標準レイアウトのカスタマイズ可能•全てのレイアウトが、レスポンシブ対応している•有料版ではページごとに詳細設定可能
また、構造化文書として作れるので問題なし

あれ？
ジンドゥーいいんじゃね？

ウェブサイトビルダーを選ぶ
メリットとは？

ジンドゥーユーザーの職業

2014年当社アンケートデータ

ジンドゥーユーザーの業種

2014年当社アンケートデータ

上流工程・コンテンツ制作に時間を割くことが•できる•ページ制作をクライアントに任せ、短期間で納品•デザイン周りのコーディングは可能
低予算の小規模案件に活かせる

上流工程に時間をかける
制作部分が短期間でできるから

私の管理サイトで困ったこと•リリースまで2日•担当者がHTML/CSSの知識がほぼ無い（作ると時間がかかる）•構成を考えることはできないけれどビジュアルと文章は書ける•複数の事業を掛け持ちしていて時間が割けない•EC専用CMSのため、単独ページの追加は業者にお願いしないとできない…

私ができること•作りたいキャンペーンサイトのイメージはできる•ページの構成（要素の配置イメージ）は、人並みにできる•HTML/CSSの知識は、人並みにはあるMalaga

#container {margin-top: -100px;}.jtpl-content {border-radius: 5px;}#content̲area h2 {font-size: 1.3em; color: #000; padding-bottom: 0.1em;
border-bottom: solid 1px #333;}#content̲area ul {margin-top: 0; margin-bottom: 0;}#content̲area p {margin-left: 1em;}.jtpl-header {height: 30px !important;background:url(/img/bgbar.png) 0% 0
repeat-x;}.navigation-colors {height: 30px !important;}.footer-options {background: #FFF;}.sidebar-options{display:none;}a:hover{text-decoration:none;}
div.lead p {margin-left:0 !important;margin-bottom:0.5em;}

受注〜納品のサイクル短縮
ページ制作をクライアントに任せる制作から納品・請求までの期間
発注

制作

ひな形納品

請求

入金

3/1

3/10

3/25

3/31

4/30

コンテンツの流し込みを任せるとさらにサイクルが短くなる

株式会社KDDIウェブ
コミュニケーションズ
採用情報
https://recruit.kddi-webcommunications.co.jp/

既存レイアウトのカスタマイズ

メニューをサイトマップとして利用

サイトマップを作らないページの追加とあわせて画面構成作成
ワイヤーフレームを作らないカスタマイズ可能な
ジンドゥークリエイターとは？

カスタマイズ自由自在
Webフォント対応、カスタマイズも可能基本レイアウトのカスタマイズ例

株式会社KDDIウェブ
コミュニケーションズ
採用情報
https://recruit.kddi-webcommunications.co.jp/「既存レイアウトのカスタマイズ」

ならまち
町家宿となりhttps://www.to-na-ri.com/「標準レイアウトのカスタマイズ」

tapes3
https://tapes3.jimdomusic.com/「既存レイアウトのカスタマイズ」

くりやま内科
https://www.kouyukai-kuriyamamedicaloffice.jp/「既存レイアウトのカスタマイズ」

Webフォント対応

特別な設定なしでモリサワTypeSquareを利用可能（有料プランのみです）

カスタマイズの基本
標準レイアウトのCSSを上書き

画像の角丸とか影とか<style type="text/css">/*<![CDATA[*/.home .j-hgrid img{
border-radius:10px;
box-shadow:0 0 2px 0 rgba(0,0,0,0.2);}/*]]>*/</style>レイアウトの数

40種類（2019年4月5日現在）

シングルカラム

2カラム

.jtpl-header

レイアウトの構造.jtpl-main.jtpl-subnavigation.jtpl-title.jtpl-header.jtpl-subnavigation.jtpl-title.jtpl-main.jtpl-content.jtpl-section.jtpl-section.jtpl-content.jtpl-sidebar.jtpl-footer.jtpl-sidebar.jtpl-footerジンドゥーのコンテンツ用クラス属性• .j-module• .j-spacing• .n• .j-hgrid

上下左右にパディングを定義• .j-header• .j-text

見出し要素

テキスト要素• .j-imageSubtitle• j-video• .j-gallery

イメージ要素動画要素を包括イメージギャラリー

• j-callToAction

ボタン• .j-hr

余白

カラム

水平線

• .j-sharebuttons• .j-table

シェアボタンテーブル• .j-htmlCode

ウィジェット• j-textWithImage• j-productジンドゥーのID属性の扱い• 原則として、コンテンツには主要クラスと共に固有のID属性が振られる• レイアウト用のDIVボックスにはID属性は振られない• 要素を個別にカスタマイズするときは、固有のID属性を割り出し、idセレ
クタでスタイルを指定

ID属性記述例• <div id=“cc-m-9314778965” class=“j-module n j-header”><h1 id=“cc-m-header-9314778965”>Web Touch Meeting</h1></div>• <div class=“j-module n j-text”><p>ウェブサイト制作をする上で、一番大切なのは何ですか？UIデザインを作ることでしょうか？それともコーディングをすることでしょうか？</p></div>

実践！
標準レイアウトのカスタマイズ

背景を広げる手順• カラムを挿入• 片方のカラムを削除してシングルカラムにする• 広げたい要素のID属性値もしくはクラス属性値を拾っておく• ネガティブマージン設定で追加したカラムを左右に広げる• 追加したカラムのID属性値を拾う• 独自レイアウトで背景に据えたい画像をアップロード、URLを拾うコーディングできないのは物足りない…

カスタマイズの応用
独自レイアウトMintreed
https://www.mintreed.com/「独自レイアウト」

家族カウンセリング研究所
https://www.kazoku-hk.com/「独自レイアウト」

有限会社
ケアアシスト
専門職スタッフ
求人サイト
https://www.ca-kyujin.com/「独自レイアウト」

本日のまとめ都道府県別利用比率トップ 20
2014年調査データ

8.0

2.0

7.0

4.0

6.0

3.0

5.0
ノーシェアでお願いします• ウェブサイトビルダーは、予算が割けず短納期な小規模案件での選択肢として活用• ウェブサイトビルダーもコーディングは可能• 予算が割けない案件では、ジンドゥークリエイターの標準レイアウトのカスタマイズが有効。
CSSとJavaScriptをフル活用して行う• 予算に余裕がある案件では、ジンドゥークリエイターの独自レイアウトを利用することで、レイアウトも含めてすべてコーディング可能ご静聴いただきありがとうございました
Twitter/Facebook：tstudio