nDiki : デザイン

デザイン (design)

2016年6月29日 (水)

肩に何か載っているだけでカッコイイと感じるプラモ狂四郎世代

image:https://www.naney.org/nDiki/2016/06/29/Mechagodzilla.jpg

ゴジラ対エヴァンゲリオン 東宝30cmシリーズの「3式機龍(2002版)重武装型 エヴァ初号機イメージカラー」と「3式機龍(2003版)重武装型 エヴァ2号機イメージカラー」が今日話題になったのですが、周囲ではデザイン的に不評でした。でも個人的にはアリだなと。

もう肩に何か乗っているだけでカッコイイと感じてしまうんですよね。あと重装甲感。

これはプラモ狂四郎のパーフェクトガンダムやフルアーマーガンダムを見て育ったせいなんだと思います。

プラモ狂四郎(1)

(3式機龍画像は http://p-bandai.jp/item/item-1000104836/ より。)

スポンサード リンク
[ 6月29日全て ]

2016年7月30日 (土)

今日のさえずり: いまだに「チョメチョメさんもSyncを始めました」メールの止め方が分かっていない

2016年07月30日

[ 7月30日全て ]

2016年8月6日 (土)

オレのマンホールのふた

naney:28176226884

注文していたマンホールのふたが届きました。「リアルご当地マンホール(ミニ) No.0020東京都」という亜鉛合金のミニチュアで 1,200円(税込)。サイズは 90mm x 5mm でずしりと重みがあります。思ったより表面はピカピカ仕上げでした。

下水道局の都型・標準マンホールふたは2001年3月から4つの文字キャップ(左3つがマンホール番号、右の1つが管渠布設年度(西暦))が付くようになっているので、これはその前のデザインです。都の花「ソメイヨシノ」、都の木「イチョウ」、都の鳥「ユリカモメ」が描かれています。

届いたマンホールふたを見てには「それ何に使うの?」と聞かれました。買った私自身ほんとこれ何に使おうという感じではあります。とりあえずバッグに入れて街に出ました。

街中にあるものはほとんど文字キャップ付きのマンホールふたに切り替わっていたのですが、ミニチュアと同じデザインのものがあったので並べてみました。やはり本物は大きいですね。家庭用ではありません。

いざマンホールふた写真を撮ってみると好条件のものは結構レアであることに気が付きました。

  • 真新しい綺麗なマンホールふたはなかなか無い。すり減っている以外に土や小石などが凹部に詰まっていたりする。
  • マンホール周囲の道路も舗装が綺麗とは限らないし、近くに白線があったりしてマンホールを綺麗に撮れないものが多い。
  • 周囲の電線や建造物の影がかかっていると綺麗に撮れない。
  • 車の往来がある所のものは危なくて撮れない。

などなど。マンホールのふたの写真をコレクションしている人たちすごいですね。

naney:28182595623

[ 8月6日全て ]

2016年8月26日 (金)

今日のさえずり: 普段滅多に明示的にはネットサービスを退会しないんだけれどね

2016年08月26日

[ 8月26日全て ]

2016年9月30日 (金)

インターンシップがんばったぞい!

「がんばるぞい!」という意気込みで9月1日から配属されたインターンの方が就労型インターンシップの最終日を迎えました。1カ月間お疲れさまでした。

今までで一番幅広くトライ

私のいるチームでインターンに来ていただくようになって4年目ですが、今年は一番幅広く様々な業務に取り組んでもらうことになりました。「仕様決め」「デザイン担当と調整」「マークアップコードの依頼と受け取り」「実装」「コードレビューアとのやりとり」「QA 項目の作成と依頼」「ユーザーサポートへのリリース共有」「リリース」と、様々な担当の人とやりとりしながらリリースしていただいたのは今年が初めてです。体調不良をかかえつつ大変だったかと思いますがやり遂げられました。素晴らしいです。実際のサービス開発の1つのケースとして良い経験となったならチームとしても嬉しいです。

思い出

  • 2日目に迷子。
  • 6日目に救急。
  • 5回一緒にランチだったけれど結局同席だったのは2回。

Blog を書くまでがインターンシップ

今回いろいろ経験したことについて、ぜひふりかえって1カ月間で感じたこと・思ったことをまとめていただければと思います。頭の中で考えるだけではなく手を動かして書き出すことで自分の中での理解を深められるでしょう。

Blog を書くまでがインターンシップです!

[ 9月30日全て ]

2016年10月11日 (火)

今日のさえずり: お腹がヤバイではなくてお尻がヤバイという意味がわかった

2016年10月11日

  • 09:18 前を歩いている人の白いバッグが見かけないデザインで「どこのだろう?」とロゴを凝視したら汚れだった。
  • 09:38 長く感じる連休だった。 (@ 株式会社ミクシィ in 渋谷区, 東京都) https://www.swarmapp.com/c/dp4aIvrm6DS
  • 12:00 過去4年の健康診断下剤からの第一波時間: 1h45m → 1h35m → 2h10m → 2h40m (min 1h35m max 2h40m)
  • 12:27 健康診断完了。
  • 12:28 ゲップ快感。
  • 12:34 下剤(センノシド錠 12mg x 2)投下。第1波到達予想時刻 14:07 から 15:12。
  • 13:27 ちょっとはやいぞ。最短更新か?
  • 14:20 お腹がヤバイではなくてお尻がヤバイという意味がわかった。
[ 10月11日全て ]

2016年10月21日 (金)

今日のさえずり: ゴッホってどんな感じに咳したんだろう

2016年10月21日

[ 10月21日全て ]

2016年10月30日 (日)

Markdownプレゼンテーションスライドを書ける Deckset for Mac

https://www.naney.org/nDiki/2016/10/30/Deckset.jpg

ここ最近はプレゼンテーションスライドを用意する時は reveal.js を使っています。Markdown で内容を書けるので便利なのですが、個人的には書き始めが億劫というネックがあります。ディレクトリを作って reveal.js のファイル一式を最初に用意するのがちょっとしたことなのですが面倒くさいのです(自分用に若干アレンジしたサンプル一式をコピーする作業)。

Markdown で書けるもので、かつもうちょっとさくっと書けるツールがあるかなと探してみたところ Deckset for Mac が良さそうなので使ってみることにしました。

スライドを書く

Deckset 方言の Markdown で記述したファイルを1つ用意すれば Deckset でスライドとしてレンダリングしてくれるのでお手軽。Deckset アプリ自体には Markdown エディタは内蔵されておらず Emacs や Atom など好みのテキストエディタで編集するスタイルというのも良いです。テキストエディタ側で保存すると Deckset 側が更新を検知してスライドを更新してくれます。

スライドに使う画像URL で指定することができる(そして推奨している)ので、ローカルディレクトリに用意してという必要がありません(もちろん Markdown ファイルと同じディレクトリに用意して読み込ませることもできます)。「プレゼンテーション時にネットワークにつながっていなかったり URL 先から消えていたら困るのでは?」というのが気になるところですが、 Deckset 側でローカルホスト上にキャッシュしてくれるので大丈夫になっています。

テーマ

テーマは Deckset が用意しているものから選びます。欧文系らしいちょっと派手なのが多く、個人的に使えるなというのはそれほど多くない印象です。個人的には Titillium がいちばんしっくりくるかなと。

エクスポート

PDF ファイルや画像でエクスポート可能なので困ることはなさそうです。

好みの設定

スライドの冒頭にそのスライドの設定を書いておくことができます。

 theme: Titillium,1
 footer: [各ページ下部のフッタに載せたい文字列]
 slidenumbers: true
 autoscale: true

が良さそげ。

reveal.js との比較

reveal.js と比べて良いなというところは以下です。

  • すぐ書き始められる。
  • さくっと画像を貼れる。
  • 「右半分画像」というレイアウトが簡単にできる(reveal.js だと厳しい)。
  • autoscale を有効にするとページに収まるようにフォントサイズを調整してくれる。

reveal.js では Web ブラウザで表示するため縦横比が変わる前提である程度余裕をもってページを書く必要があるのですが、Deckset はそこを気にしなくて良いのが楽です。CSSJavaScript コードをいじれる reveal.js に比べると細かいカスタマイズは全然できないのですが、その分デザインは Deckset に任せると割り切って内容だけに集中してさくっと書けます。

reveal.js が便利なところもあるのでプレゼンテーションシーンに合わせて使い分けることにします。

(画像http://www.decksetapp.com/ より。)

[ 10月30日全て ]

2016年11月15日 (火)

今日のさえずり: はがきデザインキット2017って Adobe AIR ベースなのか……

2016年11月15日

[ 11月15日全て ]

2016年12月9日 (金)

nDiki に貼る写真Flickr ではなく同じサーバに置く

この nDiki写真を載せる際は2005年から Flickr にアップロードしてそれを貼りつけるようにしています。これを今後は普通に画像ファイルを Web サーバ側に置くことにしました。

Flickr写真を置いておくメリットは以下があります。

一方デメリットとしては

  • Flickr にベンダーロックインされている。長期的には一抹の不安。
  • 一度画像URL が変わったタイミングで過去の写真が一部表示できなくなっている(記事側の URL を変更していく必要がある)。今後も同様の自体があり得る。

があります。

Flickr 利用で使い勝手的には問題が無いのですが、長期的に継続する Web 日記のコンテンツとしては他のサービスに依存しすぎないようにした方が良いということで、今後は普通に Web サーバに置くことにしました。

そうするとどのサイズの画像ファイルを用意するかを改めて考える必要が出てきました。

画像サイズ

今までは Flickr で生成されるから適当そうなもの(たいがい長辺 500px のもの)を選んで貼っていました。今後は自分で適切なファイルを作ってアップロードすることになるので画像サイズについてちょっと見直してみました。

Bootstrap 3 でのサイトの幅の見直してコンテナを 970px までに

Bootstrap 3 だと広くても幅 1140px (1170px - 30px) なので画像幅もこれだけあれば十分です。しかし考えてみると nDiki は1カラムなのでラージデバイス(≥1200px)向けのコンテナ 1170px はいささか広すぎます。ということでいったんミディアムデバイス向けのコンテナ 970px までしか広げないようにしました。

 @media (min-width: 1200px) {
     .container {
         width: 970px;
     }
 }

写真は基本 max-width: 100% の .img-responsive で表示しているので、これで最大 940px 幅で表示されることになります。

表示される写真の高さは最大 480px に

幅 940px だと 4:3 なら高さは 705px、3:2 なら高さは約 627px になります。13インチMacBook Pro 上の Google Chrome でこのサイズの写真を貼るとほぼ縦いっぱいになってしまいます。記事中の写真では 480px ぐらいまでかなという印象でした。ということで

 max-height: 480px;

としました。

これだと 4:3 なら 640x480px、3:2 だと 720x480px の画像サイズがあれば十分なことになります。縦位置だと 3:4 で 360x480px、 2:3 だと 320x480px です。

画像ファイルの画像サイズは長辺 1200px に

これで 640x480px (4:3) や 720x480px (3:2) にリサイズして Web サーバに置けば現時点では過不足ないということがわかりました。

ただこれだとデバイスの変化でサイトデザインを見直す時がきた時に解像度不足になってしまいます。Bootstrap のラージデバイス向けのコンテナサイズを考えていったん長辺 1200px で画像ファイルを用意することに決めました。

ついでに .pull-left と .pull-right の画像幅も調整

写真を左右に寄せた際に現状テキスト部分が狭くなりすぎることがあるのでこのあたりも合わせて今回調整しました。

 .img-responsive {
     display: inline-block !important;
     max-height: 480px;
 }

 @media (min-width: 768px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 992px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }

 @media (min-width: 1200px) {
     .pull-left.img-responsive {
         max-width: 50%;
     }

     .pull-right.img-responsive {
         max-width: 50%;
     }
 }
[ 12月9日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィでマネージャー・PO をしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス
Process Time: 0.129037s / load averages: 0.50, 0.51, 0.52
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker