nDiki : デザイン

デザイン (design)

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日全て ]

2017年5月20日 (土)

今日のさえずり: シーリングライトの常夜灯ランプが切れたので今晩は真っ暗

2017年05月20日

  • 08:00 5月18日にリニューアルオープン。 / “大森駅近くの「西友」リニューアル ヤマダ電機とブックオフ、セリアが出店 - 品川経済新聞http://bit.ly/2pQYKoH https://t.co/DD0TFBNC26
  • 08:02 昨日ガム・メディカルドロップを舐めたおかげか、喉の違和感無くなってる。
  • 12:00 メガハウスからもハンドスピナー「フィンガースピナー」を出すんだ。既に出回っているのと同じデザイン。とり急ぎ販売な感じ。 http://amzn.to/2qACZbw
  • 15:45 さすがに暑いのでスーパーでチョコモナカジャンボ買ってきた。
  • 26:04 シーリングライトの常夜灯ランプが切れたので今晩は真っ暗。防災的も常夜灯になるもの備えておいたほうがいいかなあ。
[ 5月20日全て ]

2017年6月4日 (日)

マンション南向き6畳フローリングの部屋にダイキンの8畳用エアコン AN25UES を購入

8.8畳のリビングと隣接する部屋やキッチンの冷房を10畳用のエアコン1台で冷房していたのですが、さすがにやはり厳しい。夜は布団を敷いて寝ているリビングの隣の6畳フローリングの部屋にもエアコンをつけることにしました。

6畳ですが南向きということで8畳用のエアコンからチョイス。ベランダが狭いのでコンパクトな室外機のものを探しました。でメーカーはやはり定評のあるダイキンにすることしました。

最初はミドルクラスのが良いかなとも思ったのですが、nocria S を使っていて別に自動フィルタ掃除は無くてもいい(むしろ無い方が機構的にシンプルで扱いやすそう)ということで、ベーシックモデルの E シリーズにしました。

機種が決まったので前回もエアコンを購入したヨドバシカメラ マルチメディアAkibaへ。リビングのエアコンを取り付けてもらった時に業者の人が「屋内化粧カバーはパナソニックのにしたので、もし同じデザインで揃えたければパナソニックを指定してください」と言われたので、いちおう伝えてみました。

ヨドバシカメラだと今はイナバのしか取り扱いがないとのことでしたが、念のため過去の購入履歴から同じ業者が手配できるよう調べてくれました。結局その業者は下請け先では無くなってしまったようで手配できず、標準のイナバでお願いしました。もし可能であればぐらいで全然オーケーです。標準で突っぱねず手を尽くしてくれたのは好印象でした。入館証を下げた多分ダイキン系列の方、ありがとうございました。

取り付け工事は週末を希望して次回の土曜日に決定。そのうちそのうちと先送りにしていたやることの1つが片付いてちょっとすっきりしました。

[ 6月4日全て ]

2017年6月14日 (水)

竹じゃない物差し

rimage:/nDiki/2017/06/14/2017-06-14-074240-nDiki-1200x800.jpg

机に竹の物差しがあったので手にとってみたら竹製じゃなくてプラスチック製でびっくりしました。会社で竹物差しの話をしたら新卒エンジニアが使った覚えがないと言うので2度びっくり。

プラスチックでなければ竹っぽい色でなくても良いと思うのですが、小学2年生の算数の教科書に竹物差しの絵で説明されているのでデザインを合わせてた方が売れるのかもしれないですね。

[ 6月14日全て ]

2017年6月28日 (水)

デザインチームでの初月例ランチ【日記】

渋谷駅新南口近くの GABURI SHARE にて。

ヤングチームとアダルトチームでそれぞれ近い歳同士だということがわかりました。見た目ではわからないものですね。

今日のさえずり: ニンテンドークラシックミニ Atari C-380 が出たら実家へのプレゼントとして買う

2017年06月28日

[ 6月28日全て ]

2017年7月12日 (水)

今日のさえずり: ニポポと言えば「北海道連鎖殺人 オホーツクに消ゆ」

2017年07月12日

[ 7月12日全て ]

2017年8月3日 (木)

今日のさえずり: 朝会はした

2017年08月03日

[ 8月3日全て ]

2017年8月12日 (土)

ニューバランスのウォーキングシューズ MW880 をリピート

ニューバランス ウォーキングシューズ MW880NA3 NAVY/GRAY 26.0cm 4E

rimage:/nDiki/2017/08/12/2017-08-12-162112-nDiki-1200x800.jpg

Amazon Prime Dayセールでニューバランスのシューズを注文したのですが、なかなか入荷されず結局 Amazon.co.jp からキャンセルされてしまいました。今履いているシューズの底が一足剥がれてきたので、早めにもう一足欲しいと思い別のところで購入することにしました。Amazon Prime Dayセール価格よりはさすがに高かったですが、比較的安く買えたのでいいかな。

やはり店舗で履いてみてからでないとと思い、今まで通販ではシューズを買ったことがありませんでした。しかし今回は同じ型番のシューズを買ったことがあったので大丈夫かなと。

実際サイズは OK。 MW880 はあまり高くなく、デザインも好きなので長く残って欲しいモデルです。


[ 製品レポート ]

[ 8月12日全て ]

2017年9月27日 (水)

3カ月ぶりにデザインチームの月例ランチ【日記】

6月末の初月例ランチ後、7月は休み、8月は他の皆が都合が悪いということで無しとなり、気が付けば3カ月ぶりのデザインチーム月例ランチとなりました。今日はマッドバーガー 渋谷店。私は去年の5月に新卒の皆さんと一緒に行った時ぶり。

10月に1人異動になるのでこのメンツでの月例は今回が最後。

[ 9月27日全て ]

2017年12月6日 (水)

来年の高橋書店の月曜始まり卓上カレンダー No.E152 を買ったけれども

rimage:/nDiki/2017/12/06/2017-12-06-081157-nDiki-1200x800.jpg

オフィスのデスクで使っているカレンダーを月曜日始まりにしてから1年近くになりました。 Google カレンダーその他よく使っているデジタルカレンダーはだいたい月曜始まりにしていたのでそれに合わせてです。

しかし実はなかなかこの月曜始まりの卓上カレンダーは慣れませんでした。壁掛け・卓上カレンダーはやはり日曜始まりに慣れきっているのでしょうね。年の半ば頃は「来年は日曜始まりに戻すか」と思っていたのですが、秋を過ぎてようやく慣れてきたのでもう1年使ってみるかと来年も月曜日始まりの同じカレンダーにしてみました。

で買ってからちょっと考えたのですが、もしかしたら馴染めなかったのは月曜始まりだからではなくて、「月〜水と木〜日で最上段が1段ずれているデザイン」のせいではないかと思えてきました。ぱっと見の配色とデザインはいい感じなんですが、実は左上の月見出しが邪魔なだけだったのかも。

もしかしたら同じ月曜始まり B6 卓上カレンダーだと日本能率協会の C248 NOLTYカレンダーの方がいいのではと思えてきました。うーん、高橋書店の買っちゃったしなあ。

[ 製品レポート ]

[ 12月6日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィでマネージャー・プロダクトオーナーをしています。

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

follow us in feedly

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

月別インデックス
Process Time: 0.082115s / load averages: 0.20, 0.33, 0.31
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker