トワイライツ・ノーツ

本とWEBと、デザイン

絵をたまに載せるかも

f:id:Kuichi:20170126021821j:image

京都旅行の写真より(20分)

アート・アンド・ブレイン(Art and Brain)の5ディに参加したので、それ以来気が向いたときにささっと絵を描いているのですが、なかなかいい気分転換です。

ただ、習った方法だとちょっと気軽に描けないので、やり方はだいぶ変えてしまっていますけど。

私が習った描き方は、

  1. 画用紙に十字の線を引く(これが描くときのバランスなど目印になる)
  2. 画用紙全体に鉛筆の芯の削りカスをなすりつけて均一なグレーに塗り潰す
  3. しっかり尖らせた鉛筆で形を取り、線画を描く
  4. 塗り潰したグレーを中間色として、明るい部分は消しゴムやねりけしで白く抜き、影の落ちる部分はハッチングを加えたり黒く塗り潰して陰影をつける

……というステップを踏んでいくのですが、まず大きな画用紙を均一なグレーに塗り潰す作業がかなり大変です。ティッシュを使ってなじませるんですけど、私はどう頑張っても15分くらいかかります。

あとどうしても消しカスなど細かいゴミが出てしまうので、場所も限られます。

時間もかなりかかります。描きこみ始めると数時間くらいは。

そういう訳でなかなか普段の生活の中だと習った方法で描ける機会がないのですが、せっかく習ったのにもったいない。なのでやらないよりはずっといいだろうと、簡単に描くことに決めました。

  • 用紙サイズはA6
  • 画材はシャーペンかボールペンで
  • グレー塗りつぶしは省略
  • 十字に線を引くのも省略
  • 影も線もざっくり荒く
  • 時間は10~40分くらい
  • 完成度にはこだわらない

使ってる手帳はこれです。

www.kyokuto-note.co.jp

A6だと紙が小さいからすぐ描けるのがいいし、大雑把に形を取って多少明暗をつけるくらいならそこまで時間も取りません。気が向けば指先でぼかすくらいはしますけど、大体画像みたいに荒く描いて終了です。

絵は別のブログ作るとか、イラスト投稿できるようなところにまとめるとかしようかなと考えましたが、投稿する場所を分けても私は面倒になるだけになりそうだと思いましたので、描いたときにこのブログに載せていくことにします。

不安なのはフォトライフの容量ですけど、あんまり容量が足りないようならgoogleの写真サービスにあげるとか、pro化するとかなにかしら考えてみようと思います。

コーディングもデザインも技術としては溶け合っている

コーディングの部署へ異動してから一年と半年。別の制作会社で3か月。初期業訓練校でおよそ4か月……となんだかんだでコーディングを始めて総計で2年程が経ちました。

元々コーディングは好きだけれどデザインは苦手、できればやりたくない、と思っていましたが、しばらく前からデザインもやってみたいと考えるようになりました。

続きを読む

ブログの名前を変更しました

結構長く使っていた「たそがれノート」というブログ名ですが、デザインも変えたことだし、と心機一転変えることにしました。

新しいのブログ名は「トワイライツ・ノーツ」です。英語にすると「Twilights nauts」……割と語感とタイトル文字の感じ優先で決まりました。

たそがれどきを訓練された船員のようにさらりと渡って書きとどめていきたいという意味を込めて。

また、たそがれ空のような一瞬の緊張感と美しさのある仕事ができればいいなあと思っています。

さらに、ついでと言ってはなんですけどメールアドレスも変更しました。なんとなくで決めてずっと使い続けていたアドレスでしたが、ローマ字読みが気になっていたんですよね。といって、なにか他に候補がある訳ではなかったのでずるずると……プロフィールに表示してあります。

ご連絡がある場合はお気軽にどうぞ。

という訳で簡単ですがご連絡でした。

 

ブログデザインをカスタマイズしました

数年ぶりにブログのデザインを変えてみました。といっても大したことはしていなくて、配布されているテンプレートに少し手を加えた程度です。

ずっとレスポンシブではなかったのですが、こちらもこの度対応してみました。

元にさせていただいたテンプレートはこちらです。

Written - テーマ ストア

そもそも、なぜブログのデザインを変えたか

  • そろそろレスポンシブ対応をさせたかった
  • 前のデザイン(公式テーマ:レトロポップ)はアイコンなどは可愛らしかったが横幅が狭く、デザイン的にも少々古さがあった
  • テーマストアで見つけたテンプレートのデザインがすっきりしていてカスタマイズしやすそうだったので、少し手をかけてもいいかなという気になった

デザインの要件

  • シンプルであること
  • 多少は他と違いのあるデザインであること
  • レスポンシブであること
  • ブログなので文章の読みやすさを損なわないこと

カスタマイズしたこと

背景画像(PCだけ)

www.pakutaso.com

こちらの画像を、最近ときどき綺麗めなサイトで見かけるような感じでガウスぼかしなどの加工をした後、背景画像へ全面配置しました。

Webフォント導入

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

こちらを利用してさわらびゴシックを設定してみました。これで雰囲気が結構変わった気がします。

見出しやリンク色の変更

元々がシンプルなテーマなので、これだけでもかなり変わります。

タイトル領域の縮小(スマホのみ)

ファーストビューでちょっと幅を取り過ぎかなと思ったのでブログタイトルなどの領域を小さくしました。

ブログのデザイン変更のまとめ

はてなブログのデザイン変更は設定方法にも結構癖があってあまりいじりやすいとは言えないですが、それでもシンプルなテーマを元にすれば比較的やりやすいです。

当面はこのデザインで行くと思います。

掃除で運が良くなる訳ではないけど、気分は変わるよ

年末に向けて掃除と片付けをしました。といっても本の整理までは手が回らなかったので、これは年明けに着手しようかなあという感じです。

一昨日くらいにぶらぶらと本屋を眺めていたら、掃除や断捨離をすると運が良くなるという感じの本を見かけました。シンプルライフで安定した頃から逆にそういった書籍は見なくなってきたため、目に入ること自体久しぶりです。

ぱらぱらっと中を見てみると掃除や断捨離をしたら色々良いことが起こったとかそういう感じの本でして、しかし残念ながら私はいくら掃除しても、物を捨てても、とんと良いことが起こった試しがないのでした。

しかし掃除や断捨離をすると確実に気分は『アガる』ことは否定しません。周りの環境を変えたいと考えたとき、たぶん一番すぐにできて変化がわかることだからだと思います。

それに、物がとっちらかっていて締め切りっぱなしの収拾がつかない部屋で身を縮めるようにして食事をするより、きちんと空気を入れ替えて整えた部屋で食事をする方が、精神衛生上もよろしいでしょう。

ホコリや汚れが溜まれば体調もイマイチになるし、物を探して歩くのは単純にストレスです。

掃除・断捨離は結局『身の回りを整えて秩序を取り戻そう』というだけのことで、まあ、言ってしまえば当たり前のことを述べているに過ぎません。運が良くなるは誇大広告にしても気分が切り替わる効果は確実にあると思います。

……ということをクリスマスの本日せっせと掃除をしつつ考えていたのですが、年末の大掃除というのは結構理にかなってるんだなあと。

あれこれ頭にある勘案事項についてもいくらか気持ちがすっきりしたし、年末と言わず月ごとのルーチンに入れてもいいかも知れません、大掃除。

【お題】実録:片付けられない家族の分析をしてみた

今週のお題「わたしの部屋」

写真向左:家族のスペース/右:私のスペース

現在六畳一間にて兄弟と同居しておりますが、シンプルライフ派の私に対し、どちらかと言えば片付けられないタイプの家族では衝突が起こらないはずがありません。というか、つい最近も激突して、「ひとり暮らしがしたい!!!!!」と爆発した私です。

写真の通り、ざっくりテーブルを半分ずつお互いの領土にしております。机の下も同様ですが、領土侵犯が激しいので毎日のように押し返しが必要です。

写真左:家族のスペース/右:私のスペース

部屋には他に、家族のパソコンが置いてあるテーブルがもうひとつあるのですが、こちらの机の下には教科書とか他細々したものがみっしりと詰まっており、写真と同様足を入れることもできない状態になっています。

他の場所についても、大体似たような状態です。

……という訳で、冒頭の通り激突したのですが、一向にあらためる気配がないので、この怒りを分析に向けてみることにしました。

続きを読む

Adobe Blank(Webフォント)を使った画像置換 New Kellum method

初めてレスポンシブ案件のコーディングをすることになりました。

メディアクエリで背景画像を入れ替えたりする都合上、避けて通れないのが画像置換。なにかいいやり方がないかなと、調べていたらおそらく日本語ではまだ紹介されていないNew Kellum methodという方法を発見したのでご紹介します。

画像置換とは

サンプル

画像ですよ!

このように、タグの中に入っているテキストを隠しつつ、背景画像を表示させる方法です。

コードはこんな風になっています。

■html
<p>画像ですよ!</p>

CSS
p {
width: 113px;
height: 38px;
background: url('置き換えたい画像のURL') no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Scott Kellum Methodという方法で、-9999などで画面の外にテキストを飛ばしてしまうより軽いとのことです*1

今のところこれがメジャーなのかな、と思いきや、New Kellum methodというものがありました。

New Kellum method

サンプル

画像ですよ!

■html
<p>画像ですよ!</p>

 

CSS
@font-face {
font-family: "AdobeBlank";
font-weight: 100;
font-style: normal;
src: local('AdobeBlank.otf'),
url("AdobeBlank.eot") format('eot'),
url("AdobeBlank.ttf.woff") format('woff');
}

p {
background: url('置き換えたい画像のURL') no-repeat;
font-family: AdobeBlank;
}

※サンプルはgoogleドライブにfontファイルを入れてWebフォントとしています。

乏しい英語力を総動員した結果わかったのですが、Adobeオープンソースで出している目に見えず、空白にもならないフォントを利用して画像置換を行う方法のようです。

米Adobe、見えないフォント「Adobe Blank」をオープンソースで公開 | OSDN Magazine

本来の想定としては、重たいWebフォントを読み込むまでの間、標準のフォントが表示されないようにしたりするものだそうです。サンプル通り日本語でも使える様子。特に高さや幅を指定しなくてもぺちゃんこになって置換している背景画像が見えなくなるということはないのかも。サンプルは画像が小さいだけかも知れないですが……。

ざっと調べてみましたが、この方法、日本語で紹介しているところは見当たりませんでした。日本語のWebフォントは重たくて難しいですから、発案当初(2013年くらい?)はみんなピンとこなかったのかも知れないですね。

こんな方法があるんだ、と感心しました。

Webフォントとしてはアイコンフォントなどはかなり使われるようになってきたし、画像置換の方法としてはそろそろ実用を考えてもいいものなのかも知れません。

参照:The new Kellum method

 

*1:ただ、現在では通信速度や端末性能の向上により、それ程差はない場合も。また、改行するテキストには使えなかった。2行目のテキストが消えない。

2015年の買って良かったモノは、iPod touch第6世代!

今週のお題「今年買って良かったモノ」

Apple iPod touch 64GB 第6世代 2015年モデル スペースグレイ MKHL2J/A

今年買って良かったモノは、間違いなくiPod touch第6世代です!

買うまでは第4世代のiPod touchを使っていました。ところがコードが切れてしまって、コードを買い直すくらいならいっそ本体を買っちゃおうということで突発的に購入に踏み切ったんですよね。

という訳で、iPod touch第6世代を買って良かったことです。

色んなアプリがさくさく動く

まずこれ。第4世代まではメモリ不足で動かないアプリも出てきていたのですが、題6世代で大幅パワーアップしたので動きが軽快。ゲームもし放題です。

最近はもっぱらファイナルファンタジー ブレイブエクスヴィアス(FFBE)をやってます。久々のRPG、面白いです*1

容量アップでKindle本をたくさん入れられるようになった

容量が64GBあるので、現在購入数255冊のほとんどすべてがkindleに入っていますが、余裕です。他のアプリも諸々入ってまだ15GBに届いていません。

カメラの性能が上がった

デジカメ並みとは言いませんが、そこそこ綺麗に撮ることができるので、旅行やイベントの際の持ち物が減りました。

撮った写真の例
【お題:ブログフォトコンテスト2015夏】夏の風景 古民家でお茶 - たそがれノート

確実に生活の質は上がりました

数ヶ月使ってみてしみじみ思ったのですが、日常使うモノの性能アップは、確実に生活の質を上げてくれます。軽快に動く、容量を気にせずに済むというのは小さなことですけれど、その小さなことがとても大事。

もうiPod touchなしの生活は考えられないですし、壊れたり紛失したりしたら、数日立ち直れない程の心的ダメージを受けそうなくらい大事にしています。

間違いなく日常で一番長く使っているものです。

wifiさえあればLINEも使えますし、電話機能のないiPhoneと言っていいです。

金額もSIMフリーのiPhoneの半額以下ですし、とてもお得だと思います。

電話機能は別にいらないし、できれば安く済ませたいという人にはおススメですよ。

【日記】2015年7月22日 iPod touch6購入! - たそがれノート

Apple iPod touch 64GB 第6世代 2015年モデル スペースグレイ MKHL2J/A
Apple Computer (2015-07-17)
売り上げランキング: 10,413

*1:ストーリーについては現在随時追加中の模様。

【Web】制作後のサイトの構造を守らせるか、自由度を上げるか

私は社内でも新しくサイトを制作する部署にいますので、極端なことを言えば「作るだけは作るが管理のことは考えない」といった仕事の仕方も可能です。が、できるだけそれはしないようにと努めています。

その後サイトを管理する人が困るのは良心が咎めますし、それ以前にそういう作り方をするのが気分的に嫌なのです*1

そのため可能な限りシンプルに、余分なものを削いだテンプレートを作って、こまめにマイナーチェンジを繰り返しています。

その辺りは詳しくはこちら。

【日記】2015年10月21日~10月22日 コーディング用テンプレートは極力シンプルに - たそがれノート

そういった中で悩み続けていることのひとつが『構造を守らせる作りにする』か『自由度を上げる』かのバランスです。

制作者以外の人間がサイトを運用する際の問題点

よくあるのが、運用段階で担当者が変わった際に意図せずに構成を崩してしまう、ということ。
既に用意しているスタイルなのに重複して作ってしまったり、必要なものを記述していなかったり、うっかり全ページに影響が出る修正をしてしまったり……こうなるとどんどんスパゲッティ状態のコードになっていきます。

構造を守らせるコーディング

たとえば、コーディング時h1タグに下記のようにスタイルを設定したとします。

h1 {
font-size: 20px;
font-weight: bold;
color: red;}

こうしておくと、<h1>h1見出し</h1>と記述するだけで、勝手に赤字・太字・フォントサイズ20pxのスタイルがつきます。
特に意識しなくてもh1には必ず同一のスタイルが適用されますし、htmlへの記述量は少なくて済みます。

また、作業者に見出しレベルについての理解が一定以上あるか、あるいはデザインを守るならh1→h2→h3……の順で記述していくしかないので、ある程度は構造を守ることが期待できます。

一方、この方式だとh2部分にh1と同じスタイルを使いたいんだけど……といった場合に融通がききません。

ある程度自由がきくコーディング

上のデメリット部分を解消する方法のひとつが、スタイルとコードを分離させることです。下のようにクラスを作ってスタイルを割り当てます。

CSSファイル

.title_h1 {
font-size: 20px;
font-weight: bold;
color: red;}

.title_h2 {
font-size: 16px;
font-weight: bold;
color: green;}

htmlファイル

<h1 class="title_h2">大見出し</h1>
<h2 class="title_h1">大見出し</h2>

htmlファイルの方を見ると、それぞれクラスをつけることによって見た目はh1だけど構造としてはh2、というようなことが可能です。

この方式のメリットは、見た目と構造を分離しているので、h1の直下にh3の見出しデザインを配置しなければならない場合でも、<h2 class="title_h3">といった感じにしてやれば済むところです。

一方のデメリットとして、見出しレベルに無頓着だとデザイン部分の正誤だけ見て、コピペで、

htmlファイル

<h2 class="title_h1">見出し1</h2>
<h1 class="title_h2">見出し2</h1>

という記述になってしまうかも知れませんし、あるいは、

htmlファイル

<h1>見出し1</h1>
<h2>見出し2</h2>

とクラスをつけずに記述してここだけスタイルがついてない、ということが起こることも……。

基本的には構造を守らせる作りの方を採用

私は自由度よりもサイト全体の構造やデザインの統一性が崩れる方が問題だと考えているので、なるべく「構造を守らせる作り方」をしています。サイトは運用していくものですし、自分を含めて人間はミスをするし、自分以外の人が運用しても壊れにくくする、というのがまず頭にあるからです。

そのため見出しに限らず、使いまわしの部分はできるだけhtmlファイルの方に記述を増やさなくても済むようにしています。

たとえば、見出しの前に記号がつくスタイル(表示例:「■見出し」など)は、

CSSファイル

h1:before {
content: "■";
}

htmlファイル

<h1>見出し</h1>

こういう風にしておくと、自動で「■」が見出しの先頭につきます。いちいちhtmlファイルの方に<h1>■見出し</h1>と書かなくて済むし、別の箇所で「■」を付け忘れてしまった、というミスもなくなります*2

また、上の自由がきくコーディング方式で、例外的にh2にh1のスタイルを適用するということを行っていると、まとめてh2のスタイルを変えたい、という場合に作業が煩雑になります。

同じ理由で、ひとつのタグに複数のクラスを指定するのも、うっかり抜けしやすいですし、煩雑で好きではありません。そのためなるべく1タグにつき1クラスを基本にしています。

おそらく、コーディング的にはある程度自由のきく方が推奨されているのだと思いますが、私は制作したサイトを他の人が運用するということが常なのでこんな感じです。

さっと調べてみても、こういう「サイトの構造を守らせる」という考え方が見当たらなかったのですが、他の方はどうなんでしょうか。検索ワードが良くないだけかも知れないですけど……。

修正のしやすさと崩れにくさの両立のバランスが難しい。

*1:制作時点での知識不足や考慮不足で、結果的にそうなってしまった場合はごめんなさいと言う他ない。

*2:そういう抜けやミスは結構ある

【書評】ナイトメア・プロジェクト 公式ガイドブック

ナイトメア・プロジェクト公式ガイドブック

メモ

今日はとても寒かったですね。梅雨の時期の雨はムシムシと体感温度を上げてくるのですが、冬場の雨は更に気温が冷え込むように感じます。乾燥しているときより冷気がまとわりつくというか重さを持つというか。

さて、しばらく備忘録につけていた出費ですが、このあたりでそろそろ終了したいと思います。自分の出費の傾向はなんとなくつかめてきましたし。

日記はなるたけ継続してつけたいと思います。

書評

発売ほやほやのナイトメア・プロジェクト 公式ガイドブック買いました!

仕事の帰りに本屋に寄ってゲットしてきたのですが、早く、誰にも邪魔されず読みたいということで帰りに食事しつつ読破*1

ゲーム自体は遊びつくしているため、攻略フローチャートに目新しい発見はなかったのですが、設定資料が楽しいです。ゲームで見えなかった全身図はこうなのか! とか。ゲーム中でいまひとつ曖昧なところが用語集で補完されていたりとか。

一夜怪談の前の沼屋敷事件のプロローグも載っていたり、インタビューで制作の裏側が語られていたり、書下ろしがあったりと結構盛りだくさん。

個人的には、7th blood vampireの用語解説、祓い手の村の運営費のひとつに『博打』とあったのがちょっとウケました。うっかりと、レナたちがチンチロリンをしている姿が鮮やかに脳内に浮かんでしまいました。

キャラや世界観をもっと細かく知りたい、という方にはおすすめかと思います。

ナイトメア・プロジェクト公式ガイドブック

PHP研究所
売り上げランキング: 485

*1:家には家族がいるため、読みたい本があるときは結構こういったことをする。