2020年の総括 - ビア鯖編だったはずのもの
ビア鯖アドベントカレンダー2020 2ndの3日目の投稿になります。昨日に引き続き、枠が空いていたのでいただいてしまいました。
昨日のエントリー、投稿日が12月1日になってしまっていましたね。2日のアドカレのものだったはずのに、失礼いたしました。
このエントリーは気持ちの上では昨日からの続きもののつもりで書いております。また2020年の総括とは全然関係のない話から書き始めますが、よろしくお願いします。
このブログのひとつのテーマとなる予定の「情報デザイン」と「情報アーキテクチャ」について
残念ながら私きらきらには、現状ではブログで発信するに値するような、特筆するようなコンテンツがありません。なので、発信する「コンテンツの内容」はあまり気にせず、「コンテンツの発信の仕方」を工夫し、またそれについて書いていきたいと思っています。
「コンテンツのをわかりやすく伝える」ための方法論は世に存在しているようで、私はそれを勉強しようと思っています。このブログを書くことも勉強の一環です。
情報デザインというもの
上で私が述べた情報をわかりやすく伝える方法論とは、世で「情報デザイン」と呼ばれているものを指します。
これから勉強しようと思っている身なのできちんとしたことは何も知らないのですが、アドベントカレンダーに枠を頂戴してしまった以上何かしら書かないといけない、ということを口実に、（間違いを恐れず）現時点での理解を書いてみたいと思いますのでよろしくお願いします。
嘘が入っていたらごめんなさい。
情報を伝えるということ
「情報を受け手にわかりやすく伝える」ために工夫できることはいろいろあると思います。私の拙い職業経験を基に例を挙げると、ビジネスの現場で、
- 業務マニュアルを作成するのに電子媒体と紙媒体のどちらがわかりやすいか
- 研修資料は文書で書くのがわかりやすいか、それともeラーニングのようなスライドや映像を主とした媒体がわかりやすいか
などといったことが考えられます。
文書で誰かに業務上の伝達をする際も、センテンスの長さはどれくらいにするか、読点をどの程度使うか、どの程度する段落分けするかといったことが工夫できます。*1
今書いたようなことはこのブログでは考えませんが、そういった「わかりやすい情報伝達の仕方」についての理論が「情報デザイン」だというのが私の認識です。*2
情報デザインを意識したブログ
情報デザインの考えをWebページやブログに反映させると、「文書の構造をわかりやすくする」とか、「デザインやレイアウトを読みやすくする」ということになります。
それは技術的には、前者は「良いHTMLを書くこと」、後者は「良いCSSを書くこと」に相当します。
HTMLは昔多少触ったことがあるものの、CSSについてはほとんど未知ですし、HTMLも大部分を忘れてしまっています。Webページを作ることにも興味があるのでこれらのについても学んでいきたいと考えていますが、情報デザイン、HTML、CSSの3つを並行して学ぶことは互いに相乗効果をもたらすのではないかと期待しています。
2020年の総括だったはずのもの
さて話は変わるのですが、アドカレの予告欄には「2020年の総括」と書きました。
私きらきらの趣味はバイクでどこかに走りに行くことなのですが、走るだけで行った先で何かをしたり景色の写真を撮ったりすることはなく、基本的に行って帰ってくるだけです。
ただ、行った先で美味しいものを食べたいという欲求は強く、食べ物の写真だけは撮っておくことが多いです（せっかくブログをはじめたので、来年は走りに行ったら景色も撮ってブログに載せられたらいいなと思いました）。
その写真を使って2020年のバイク走行を振り返る予定でしたが……
それらの写真をブログに載せて、2020年はこんなだったなあ、と振り返るつもりだったのですが、CSSとはてなブログの仕様の知識不足のため、写真のレイアウトがうまくいかず（素人なのにいきなりブログのCSSを弄るからこうなるのですが）。
またiPhoneで撮った写真とAndroidスマホで撮った写真が散らかってしまっていて、iPhoneで撮った写真はすぐに取り出せるのですが、Androidで撮った写真の投稿はかなり手間だと気付いてしまい。
これは後日に見送らせてもらい、全然関係ない情報デザインのことを書きました。
ブログのテーマにすると宣言した情報デザインや情報アーキテクチャの勉強をさっそく始めたいと思いましたが、HTMLはともかく如何せんCSSの知識がゼロスタートゆえ、ブログに写真を載せることすらままならないことが判明してしまいました。
当面はCSSの勉強に時間を割くことになりそうです。
おまけ
この2日間くらいで試行錯誤して書いたCSSを載せておきます。コメントアウトされていたりインデントの仕方が統一されていなかったりしますが、自分にしてはこれでも頑張った方です（コピペも入ってるから仕方ないね）。
今日も本文よりCSS調べてたり書いてる時間の方が長かったと思います。続く。
.entry-content h4 {
font-size: 1.1em;
}
/*
br {
display: block;
content: "";
height: 15px;
}
*/
.entry-content p {
margin-top: 2em;
margin-bottom: 2em;
}
/* h4 {
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
} */
.box1 {
padding: 1em 1.5em;
margin: 2em 0;
border: solid 1px #b0c4de;
margin: 2em;
font-size: 0.9em;
}
.box1 p {
margin: 0;
padding: 0;
}
追記
何やらアップロードはしたものの、レイアウトに失敗した写真がアドベントカレンダーの方に表示されていますね。
あえてそのままにしておきます。かしこ
