メープルたいむ

メープルもみじがお送りする、Webと社会とサブカルといろいろな雑記。エモい×情報量。

【祝!初仕事!】"石の裏のダンゴムシ"さんのブログデザインを担当しました!

今回は明るく楽しく、報告&宣伝メインの記事です。

なんとなんと、この度わたくしメープルもみじ、
初めて人様のWebサイトのデザインをさせていただきました!

しかもなんと我らが同士、はてなブロガー!


f:id:momijitan:20171004163306p:plain

dango64.hateblo.jp



初仕事をいただいた、この「石の裏のダンゴムシ」さんは、以前僕が参加していたネット上等で知り合った人が集まる会の名前でして、僕のホームページを見てくださった会のブログ担当の方から「是非に」ということで、感謝感激で引き受けた次第です。

人様のWebデザインをさせていただくのも、はてなブログという枠組みの中でデザインを構築するのも初挑戦でしたが、本当に楽しく、貴重な経験になりました。

今回は、その初仕事の流れや、諸々宣伝をお届けしたいと思います。

実装までの流れ

イラレで草案作成

実際にお話をいただいたのは8月中旬のこと。ちょうどその頃インド旅行*1に行っていたので実際にデザインの策定に取り掛かれたのは8月末でした。

まず先方からご丁寧に要望をまとめたリストを送っていただき、それを元にデザインを策定しました。

f:id:momijitan:20171004164329p:plain
(めっちゃ細かく書いていただいて大変助かりました)


僕が自分のホームページを作った際は、ぼんやりと浮かんだイメージをルーズリーフにぐちゃぐちゃと描き、後は作りながら考えるという、言ってしまえば行き当たりばったりなやり方でした。

ただ今回は、自分自身で完成図をイメージ出来なかったのと、実際にコーディングをしてから後悔したくないな、ということで宝の持ち腐れとなりつつあったソフト「Illustrator」に手をつけました。

Illustratorことイラレは全くの素人だったのですが、この機会に使いこなしてやろうといじくりまわして、できたのがこちら。

f:id:momijitan:20171004164709p:plain

どどん!

個人的に追求したかったシンプルなデザインと、安心感のある配色、女性ウケもするデザインとのハイブリッドが難しく、かなり悩みました。

シンプルさ追求で背景は白のまま、基本色は落ち着いた薄緑、リボンを意識したメニューバー、ダンゴムシということで記事頭にダンゴムシのアイコン、丸で統一感を出した見出しやシェアボタン…


正直なところ、イラレの操作は行き当たりばったりでなんとかなり、むしろ最初のアイディアが浮かんでくるまでが大変で、発想力に乏しい自分を呪いました。

遊びに来ていた彼女とあーでもないこーでもないと言い合いながら、かなりのアドバイスをいただきました。ほんとありがとうございます(小声


自分のデモブログで動作確認

細かい修正はあったものの、すんなり原案のOKをいただきました。いやはやなんともありがたい。

しかしOKもらったところでいきなり実装というわけにもいきません。実際にコーディングしてみたら「わぁ出来なかった!!」じゃ困ります。
そこで、少し前に「はてなブログのテーマ作るぞぉぉ、うおお」と言いながら作っておいた僕のもう一つのブログ(非公開)の方を活用しました。

実際にデザインを調節していくと、文字の大きさや余白など細かい部分にコレジャナイ感が出てきます。適宜調整したのですが、なにしろデザインのプレビューのためにいちいちソースコードをコピペしなければならないので、修正の一手間に時間を取られた気がします。

また難しかったのが、今回のようにデザインとして画像を使用する場合です。
本来ホームページで画像を挿入したい場合、HTML上でimgタグを使うのが一般的です。が、はてなブログという枠組みでカスタマイズが可能なのは基本的にはCSS。「え、どうしよ(笑)」となりました。
また画像をどこから参照すればいいのか、という問題もありました。

今回僕は元画像をはてなフォトライフ*2にアップロードし、そこのアドレスを参照。そして挿入はCSSで背景画像として設置し文字が重ならないようズラす、という方法を取りました。

↓詳しい手順は後述しております
こちら

調整済んだらいよいよ実装

モブログの確認で機能面もOKをもらえたらいよいよ実装。

仮実装デザインを少し修正してコピペですぐ完了でした。備えあれば憂いなし。1番あっさり済んだかも。

とはいえやはり完成すると感動モノ。


完成直後の僕おぉできたぁ!動いてる!!んほぉ!!



はてなカスタマイズへの手引き(CSS経験者向け)

いずれさらに詳しく記事にしたいと思っていますが、ほんの少しだけ、はてなカスタマイズにお役立ちな情報をお伝えします。

はてな民にとってはもはや当たり前ですが、はてなブログって無料ブログのわりにほんとに自由度が高い。

元のデザインもシンプルでお洒落だし、購読機能もあるし、はてなブックマークとの親和性も高いし、カスタマイズの余地がたくさんある。

はてなの1番の魅力は、このブログ初心者からがっつりやりたい人までのカバー範囲が広いことじゃないかな、と思っています。


基本的にいじれるのはCSS。公式配布CSSを使うべし。

ユーザーがカスタマイズできる大部分はCSSによるものです。

デザイン→カスタマイズ→デザインCSS
f:id:momijitan:20171005182816p:plain
この部分にソースコードをコピペしてあげることで適用できます。

1から記述してもいいのですが、全て1から設定するのはわかりにくく、骨が折れます。そこで、はてなブログがテーマ制作のために交付しているCSSに追記していく形をオススメします。

「boilerplate」といって、以下のリンクで配布されています↓↓
https://github.com/hatena/Hatena-Blog-Themes/tree/master/boilerplate


これを自分のエディター*3で開き、追記した上で前述の場所にコピペすればCSSが上書きされ、ブログデザインが変更されます。

ただ面倒なのは、一々長ったらしいソースコードをコピペしなきゃいけないこと、ページによっては反映結果を確認するために保存しないといけないこと。(デザインのプレビューで見れるのはトップページと記事ページのみなので)

思い通りのデザインになってない場合、ChromeFirefoxの検証機能を駆使して原因を究明します。だいたいデフォルトや共通で適用されてるCSSのせいだったりします。

ヘッダー下、記事上下、フッターはHTMLを自由記述可能。

CSSだけと言いつつ、実はHTMLを追加できる箇所がいくつかあります。

ヘッダー(タイトル)の下、記事本文の上(=記事のタイトルの直下)、記事広告の下、そしてフッター。またサイドバーにHTMLの部品を設置することもできます。

注意しておかないといけないのは、記事上下に記述した部分は「記事だけ」のページに飛ばないと表示されない。だから例えばメニューなど、どの画面でも表示したい部品はそこに記述してはいけません。
逆にシェアボタンなどを自作した場合、それは「その記事」をシェアするためのボタンなので記事のページに表示されるのが望ましいです。

今回のダンゴムシのデザインではヘッダー下、記事下、フッターを駆使して機能を追加しました。

嬉しいのが、HTMLが追加できるということはそこにscriptタグでjavaScriptの記述を追加できるということです。javaScriptを使えれば、スライドやフェードイン、アウトなどのアニメーション*4を追加できます。


可愛いアイコンを導入したけばFont Awesome!

ここからは更に細かい小ネタ。

今回のデザインでも使用し、また僕のホームページでも多用しているアイコンサービスがあります。
f:id:momijitan:20171005184126p:plain
f:id:momijitan:20171005184231p:plain

その名もFont Awesome。

fontawesome.io


これ何がすごいかって、様々なアイコンをフォントの一つとして、文字として扱えるんです。文字のように自在に色や大きさを変えられるんです。

これを加えるだけで地味なボタンも可愛げのある雰囲気になりますし、SNSのシェアボタンにもアイコンは欠かせません。*5


これをはてなブログに導入したい場合、
まず設定→詳細設定→headに要素を追加

f:id:momijitan:20171005190100p:plain
↓↓↓↓下に続く↓↓↓↓
f:id:momijitan:20171005190048p:plain

ここに以下のコードをコピペします。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


そして実際に適用したいhtml上で
このように書くと↓

<i class="fa fa-commenting" aria-hidden="true"></i>

こうなる。↓↓

詳しくはfontawsomeのサイトを見て欲しいのですが、classが指定されている「fa-〇〇」という部分を変えることで各種アイコンを呼び出せます。〇〇の部分はサイトで見れます。

fontawesome.io


デザインとして画像を挿入する

前述したものをもう少し詳しく。

今回は実際にダンゴムシの画像を記事タイトル頭に追加した方法を解説します。

①まず自分のはてなフォトライフにアクセス、写真をアップロード

はてなフォトライフ、とググればたどり着けます。この時点で画像サイズは表示させたい大きさに近い方が望ましいです。

f:id:momijitan:20171005191922p:plain

②写真のURLを取得

f:id:momijitan:20171005192002p:plain

フォルダを編集、という画面に移動します。そこでURLが取得できます。
必要なURLはimgタグのsrc=以降の部分です

③背景画像として設定

background-sizeで大きさを表示させたい大きさにします。

background-image: url("http://img.f.hatena.ne.jp/images/fotolife/…");
background-size: 70px 70px;
background-repeat: no-repeat;
④文字が重ならないように余白を作ってズラす

今回はpaddingを使って右に80pxズラしました。

padding: 0 0 10px 80px;

お仕事募集中です!

小難しい話はここまでで、以降宣伝です。

maple-tree.moo.jp

はてなブログのカスタマイズ、その他サイトのWebデザイン等、お仕事募集中です!!!

そこそこカッコイイもの作れます!!

デザインの提案だけ、コーディングだけ、などでも承ります。まずは相談というだけでも構いません。

詳しくはこちらからお願いします↓
お仕事の依頼 | MapleTree


※アマチュアのでしゃばりで、制作経験も浅く、それなりにお時間もいただいてしまうかもしれないので、現段階では特に報酬の要求は考えておりません。ボランティアでやらせていただいております。感謝のお気持ちと宣伝等いただければ励みになります。

ダンゴムシ会についてのご案内

この度お世話になった「石の裏のダンゴムシ」さんの宣伝を最後に記事を締めくくりたいと思います。


dango64.hateblo.jp

僕は会発足当時の参加メンバーであり、しばらく抜け、現在はメンバーではあるものの参加率が低い状態です。


石の裏のダンゴムシ会は、「生きづらさ」を感じている人のための安全基地、ということで、様々な悩みを抱えた人が集まり語り合おうという会です。毎月第4日曜日新宿付近で活動されています。
(遠くに住んでいる人達が来にくいのが課題だったり)


この会の魅力は、同僚や友人、家族間では話せない悩みや生きづらさを遠慮なく話せる、聞いてもらえるというところです。

本当に悩みは人それぞれですが、「自分の他にも悩んでいる人がいる」と安心したり「そんな悩みもあるのか」と見聞が広がったりします。
「みんなで頑張って悩みを解決しよう」という暑苦しい集まりではなく、「実はこんな生きづらさがあってね〜」と告白し合う、前に進みはしないが停滞を許す、という雰囲気の場所です。日々プレッシャーに追われている気分の人にはオアシスに感じるかもしれません。

僕が参加したのは二度ほどですが、本当に優しい、人のいい方ばかりで、親戚の集まりのような不思議なアットホーム感がありました。世代もバラバラで、僕は年上の方とじっくり仲良くさせてもらったことがないので、とても新鮮でした。
ダンゴムシを通じて知り合い、個人的に仲良くさせていただいてる方も何人かいらっしゃいます。


そんな感じのダンゴムシの会ですが、最近参加メンバーが減少傾向にあるようでして、是非興味を持った方は、会ブログの様子見だけでも何卒よろしくお願いします。

石の裏のダンゴムシ

ーーーーーーーーーーー

*1:インドを大名旅行しただけで世界観が変わった話 - メープルたいむ

*2:はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム

*3:僕は「SublimeText3」を使っています。

*4:jQueryというライブラリを使うのが手軽で一般的です

*5:TwitterFacebookなど有名企業のアイコンは一通り揃っています!素敵!