基本ファングラーの社内開発体制では「バックエンド」「フロントエンド」という分担で2名体制で開発がおこなわれる事が多いです。
自分はデザイナーなので「フロントエンド」の話に触れますと・・・
- UI設計を考える人
- デザインをする人
- コーディングをする人
・・・と分業でおこなわれる事が多いですが、これらを一人でやらなくてはいけません。
と、言ってもファングラーはシステム開発メインで、主にクライアントには管理画面的なシンプルで、且つ要件も所謂Web制作会社が受注する様なWebサイトに比べると、多くのスキルは求められないので、上記程度であれば一人で賄えてしまいます。
しかしやはり「Webデザイナー」という肩書きを名乗り、Webデザインが好きである以上、新しいデザイン・新しい技術を活用して、色んな物を作ってみたいと思ってます。
そんな普段の制作業務のフラストレーションを発散したく、いつも一緒に開発をしているプログラマーと「何か自由に自分達が面白いと思う物を作りたいよね」と夜な夜な皆が帰った後、話をしていました。
目に留まったのは「縦書きWebデザイン」
マイナビニュースで「CSS Writing Modesを使った「縦書きWebデザイン」のアワード- 賞金10万円」という記事が目に留まりました。
書きWeb普及委員会は、優れた縦書きWebデザインを選考する「縦書きWebデザインアワード」の応募受付を開始した。自由部門および課題部門の最優秀賞にはそれぞれ賞金10万円が贈呈される。応募締め切りは2月8日。
Webの新たな可能性を見せてくれるような縦書きの作品を募集し、優れた作品を選出するコンテスト。
引用・出典：CSS Writing Modesを使った「縦書きWebデザイン」のアワード- 賞金10万円 | マイナビニュース
( ﾟдﾟ ) ｶﾞﾀｯ
.r ヾ
＿_l_l /￣￣￣/＿
＼/ /
縦書きWebデザインの存在は知っていましたが、自分達の業務では触る事がなく、良い機会だと思い、縦書きのWebサイトを作ろう！と決意しました。
縦書きが映えるWebサービスを企画
基本的にWebサービスの開発は「サービスの目的を考える」「機能を洗い出す」「ページ遷移を作る」「ページデザインに落としこむ」とザックリとした流れで作りますが、今回はデザインが先に来てしまってます。
デザインコンセプトからWebサービスを作るというのはかなりイレギュラーです。
そもそも縦書きのWebサイトを作りたいだけなら、静的HTMLでファングラーの会社紹介ページでも作れば良いじゃん的な発想だと思うんですけど、「新しい技術をただ使う」だけだと意味ないので「新しい技術をどう活かすか」が大事なのです。
縦書きCSS使いたかっただけなのに何を大袈裟な話を（ｒｙ
というより、自分達が「Webサービスを作りたい！」と思って始まったので、縦書き云々はキッカケでしかありません。
前置きが長くなりましたが、Webサービスの企画はあっさり決まりました。
何か名言を投稿するサービスを作ろう！
縦書きは明朝体で心に響く文章が良い！
名言を投稿するサービスと決めたらもう作るのは早い早い。
- 投稿新着順一覧(トップページ)
- 投稿人気順一覧
- 閲覧ページ
- 投稿完了後ページ
ページ数は4ページ。投稿フォームは全ページに設置する事で、制作ページを削減。
会員登録など煩わしいものはなくし、サイトに訪れた人が誰でも利用できるWebサービスに。
また名言の人気投票をおこなえる様に、Facebookなどにも利用されているLike機能を実装。
会員登録はないためCookieで制御。
ここらへんの開発は1時間弱くらいで、開発完了。
デザイナーである自分はここからが本番・・・！
縦書き＆明朝体で大枠を設計
まず縦書きをするためにはwriting-modeと文字の方向を決めるtext-orientationを記述する必要があります。
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
text-orientation: upright;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
こんな感じです。
縦書きWebサイトの悩めるレイアウト・・・！
縦書きは誌面だと一般的には右から左に流れていきます。
誌面のレイアウトも右から左に読んでいく形が多いですが、Webサイトの場合、左から右に読んでいくパターンが多いです。
所謂Zの視線移動ですね。ロゴは左上に配置されコンテンツが中心にある形ですが、縦書きだとどうしても右から読んでいくので、従来のWebサイトのレイアウトだと見にくい＆読みにくい現象が起きてしまいます。
そこで、ヘッダーを排除し、サイト右側にfixedでロゴ・メニューを設置しました。
テキスト量に応じて縦幅が伸びてくれない
テキストコンテンツはテキスト量に応じて、縦幅(height)に伸びていき横幅(width)は同じですが、縦書きコンテンツだとまさに逆で、縦幅が固定で横幅が伸びていきます。
横にスクロールしてWebサイトを見る習慣・文化がないので、横幅も縦幅も固定しました。
しかしそうすると投稿された文章量に応じて文字がはみ出たり、表示されないという事象が発生していまいます。
そこで投稿されたセンテンスが表示される領域にoverflow-xを指定し、ボックス内でスクロールするように対処しました。
これはかなり苦肉の策ですが、他に良いアイディアがなかったので・・・。
OS・ブラウザによっては縦にならない記号がある
Androidでは…や：が縦にならず、「」も縦にならないので、表示のされ方にかなり違和感が出てしまいます。
上記の様にSafariでは縦になる記号もChromeでは縦にならないケースがあります。
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
text-orientation: upright;
上記の様にtext-orientationをuprightに設定すると、半角英数字も縦書きにしてくれますが、代わりに記号などが縦書きになりません。
その記号もブラウザによって縦書きになる場合があるので、対応が難しいところです。
そもそも縦書きWebサイトを制作する際は、HTML側(文章内容)も加味して、制作するのが一番なのですが、
CGMではそういうわけにはいきません。
textareaは縦にならない
肝心な投稿箇所に利用するtextareaですが、Firefoxでは縦書きになるのですが、SafariやChromeでは縦書きになりません。
CGMを縦書きで作る際の苦労の要因になるかと思います。
（対策案があれば是非教えて下さい・・・ ）
その他の問題
投稿時間などは漢数字に変換するなどで対応できますが、さすがにURLなどは縦書きにすると違和感が出てしまします。
あと制作Tipsではないですが、文章を中心に寄せよう！と思っていつものノリでtext-alignを利用すると縦軸に対して寄るので、
CSSを記述する際のノリを縦書きノリに切り替えないと、結構つまずいてしまいます。
完成したCGM！その名も「VibesWord」
制作までの過程の苦労を紹介しましたが、実際できあがったサイトを見ていただきたいと思います。
VibesWord(バイブスワード) -誰でも意識高くなれる自己啓発メディア-
http://vibesword.com
コンセプトはバイブスを感じたワードやリスペクトしたフレーズを投稿して、それに共感したりしなかったり評価できるサービスです。
意識が高くなりそうなセンテンスをどんどん投稿しちゃって下さい！
そして「縦書きWebデザインアワード」にいざ応募しようと思ったら・・・
募集対象は一般、Webクリエイター、学生(特に高校生)などで、性別、年齢、国籍を問わず、個人またはチームでの参加が可能となっている(法人単位での応募は対象外)
引用・出典：CSS Writing Modesを使った「縦書きWebデザイン」のアワード- 賞金10万円 | マイナビニュース
なんという事でしょう、法人単位で応募は不可との事・・・。
じゃあ個人で応募すれば・・・！と思ったですが、業務中に制作したものなので、今回は応募は諦め、単純に縦書きWebサイトの制作を楽しんだという事で、ひとまずは終了です。
合間合間にちょこちょこ改修していこうと思ってます。