「ナインアワーズ赤坂」に連泊してみた感想

東京へ行くときにいつも利用しているビジネスホテルが、今回は予約できませんでした。いい機会なので、開業したばかりの超オシャレカプセルホテル「ナインアワーズ赤坂」にに連泊することにしました。開業直後の京都店に宿泊したことがあり、久しぶりでした。

結論から言うと、ナインアワーズ赤坂は、連泊や、荷物が多い旅行には全く向いていません。赤坂店には重要な問題が複数あり、かなり厳しいレビューをしなければなりませんが、敢えて正直に書きます。


睡眠が快適すぎる


開業時から変わらず、カプセル=スリープポッドの性能がすばらしかったです。マットレスは薄いのに驚くほど柔らかく、照明・空調・防音も完璧。二晩とも横になった途端に爆睡しました。

枕元には交流電源だけでなく、USB電源があります。物が置けるスペースもありますが、ごく小さいものしか入りません。身の回り品は足元にカバンを置くことになりますが、充分足を伸ばせるので許容範囲かなと思います。

ハンドバッグひとつで寝るだけであれば、ナインアワーズは最高です。というか、それがカプセルホテルの本来の役割だったのですが。


シャワー

ナインアワーズには浴場はありません。そのかわり、充分な数のシャワーが用意されているため、満員になる心配はありません。

シャワーはオシャレですが、ハンドルのどこにも出っ張りがなく、手に石鹸がついているとひねるのがとても難しいです。場所が場所だけに写真を撮れませんでしたが、「デザインの敗北」といった感じです。

洗面所、アメニティ

シャワーは充分なのに、洗面所が足りていません。朝は混雑して大変でした。アメニティはハンドソープのみで、洗顔料、化粧水などは用意されていません。そのくらいは持参するので問題ないのですが、コップもないので薬も飲めません。

休憩できない

ポッドを外から見せる設計にした、赤坂店のみの問題と思いたいですが、明らかに共有部に対してポッドが多すぎます。人が多すぎて落ち着かないです。

休憩スペースは一階のコーヒーショップのカウンターのみです。玄関にベンチがありますが、人の出入りが頻繁なので落ち着きません。自販機は外なので、着替える前に飲み物を買っておく必要があります。

トランクを開けられない

ロッカールームが狭く、かつブロックごとに廊下のどんつきにあります。説明が難しいので雑な図を書くとこんな感じです。絵が下手でエレベーターの前が空いているように見えますが、実際は、壁際には海外旅行者の巨大なトランクがびっしり置かれています。



この構造だと、ロッカーの前でトランクを開けることになりますが、狭い廊下をトランクが塞いでしまうので、同じブロックの他の人がロッカーを開けられなくなってしまいます(つまり10人いたら2人くらいしか開けられない)。常に空気の読み合いが発生し、朝は戦場でした。

なお、公式サイトの写真を見た限りでは、神田店(ウーマン神田)はこの問題が出にくい構造になっています。

セキュリティ問題

これを書いて大丈夫かと思いますが…朝、洗面所に男性が入ってきて歯磨きをはじめました。スタッフともLGBTの人とも思えません(男性スタッフは午前3時〜4時に来ます)。男性の洗面所が混んでいたから女性用の方に来たのかもしれません。

男女のエレベーターが隣同士で、かつフロントから死角になっているので、異性のフロアに簡単に侵入できてしまうことに気付きました。今のところ問題が起きていないと思いたいですが、なんらかの見直しをした方がいいのではと思いました。

まとめ

「ナインアワーズ赤坂」の感想は以上です。二泊以上には今後利用しないと思います。そもそも連泊をするような施設ではない、としても、飲みすぎてかばんひとつで宿泊するような使い方では、今度はアメニティが少なすぎる問題があります。

ただ、夜や朝にポッドから出て見る幻想的な景色、美しく海外の人でもまったく迷わないサインボードなど、デザイン性についてはほんとうにすばらしいです。デザインと宿泊施設としてのユーザービリティの共存を願うばかりです。


投稿者名 うぇびん 投稿日時 2018年11月24日 | Permalink

Atomic Designの思想でCSSフレームワークを作るのは難しいので代替案を考える


一昨日、「FLOCSSがわかりにくい」「Atomic Designの思想でフレームワークを作ってみたい」という記事を書いたところ、とてもたくさんの感想をいただきました。

【Webdesign】Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい | ウェビンブログ

大半がフロントエンドエンジニアからの突っ込みです。著名な方々にもたくさん意見をいただいただのでまとめました。ありがとうございます。

「Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい」に識者たちの鋭すぎる突っ込みが入る - Togetterまとめ

Atomic DesignがCSS設計に適していない理由

ピクセルグリッドの高津戸さんによると、そもそもAtomic DesignはCSSやJSの設計とは全く関係ないそうですが、よく考えてみると、たしかに厳密な階層構造を持っているAtomic Designの設計は、デザインレベルからの意思統一が可能な環境でなければ破綻してしまいます。

私はデザインを外部に発注することが多いですし、CMSベースで構築すると、どうしてもマークアップやクラスの命名に手を出せない箇所が出てきます(※)。

そんなこんなで、Atomic Designを採用することは諦めて、既存のCSS設計を、専門のマークアップエンジニアではなくても理解しやすくする方向で考え直すことにしました。


投稿者名 うぇびん 投稿日時 2017年06月16日 | Permalink

a-blog cmsの投稿画面用UIと既存スタイルの衝突を回避するCSSを公開します


a-blog cmsの魅力は、公開サイトからデザインの異なる管理画面へ移動せずにエントリーの投稿ができるところにあります。日本での利用を前提としたUIもわかりやすく、クライアントさんからの評価も高いです。

投稿画面のユーザーインターフェースのCSSも丁寧に作られているのですが、導入するサイトのCSSルールによっては衝突が起こる場合があります。

典型的な例が以下のようなサイトで、body要素のスタイルを参照しているa-blog cmsの投稿画面は、冒頭の画像のように見た目が崩れてしまいます。

  • bodyにセリフ系、デザイン系のフォントを指定している
  • bodyの文字サイズを「0.625rem(=10px)」として、各モジュールは「140%」などの相対%で調整している

これらをはじめとする細かい問題を回避するCSSをGistで公開しました。

a-blog cms バージョン2.6時点の、公開ページでの投稿フォームなどの既存CSSとの衝突を修正するための追加CSS

こちらからも、2017年1月19日時点のバージョンをダウンロードできます。


ファイルを開く

acms_ex.css.zip

使い方

以下のとおり、本来の「acms.css」に続けて読み込んでください。

<link rel="stylesheet" href="/css/acms-admin.css">
<link rel="stylesheet" href="/css/acms_ex.css">

このCSSは、以下の問題の修正と、外観の調整を行います。

  • 本文のスタイルの影響をUIも受けてしまう問題を回避
  • 全幅レイアウトのサイトに組み込んだときにUIが広がりすぎる問題を回避
  • 管理ボックスのボタンサイズを固定
  • ユニット内のラベルのクラス名がbootstapと重複している問題を回避
  • acms.css以外のフレームワークを使用すると予期しない箇所で段組が解除されてしまう問題を回避
  • エントリーカスタムフィールドのラベルを長いタイトルにも対応させる
  • ファイルユニットになぜかインラインでwidthが入ってしまう問題を回避
  • ツールチップアイコンをエントリー・モジュールのカスタムフィールドでも使用できるようにする
  • 文字装飾ボタンを目立たせる

「本文のフォントをacms.cssのフォントに合わせる」「予期しない箇所で段組が解除されてしまう」「文字装飾ボタンを目立たせる」については必要ないケースもあると思うので調整してください。

また「ファイルユニットになぜかインラインでwidthが入ってしまう問題」については今後のバージョンで修正される可能性があります(先日リリースれた2.6.1.4では未確認です)。その場合はこちらは逆に不具合の原因になるかもしれません。


私はいちからすべてテーマを制作する案件だけでなく、すでに制作会社さんによってコーディングが終わったサイトにCMSを組み込む案件も多数請け負っています。この調整CSSは、そのような案件を通してちょっとずつ書き足していったものです。

個人的には10pxから文字サイズを調整する手法は開発者側の計算が楽になるものの、改修や外部サービスのパーツ追加に弱いので避けるべきと思います。

しかし、そういった導入先サイトのスタイルの問題だけでなく、最近のCSSフレームワークで見られる「ワイド画面でサイト全体の文字サイズが大きくなる」効果によって「良かれと思って作られているものがacms.cssと衝突する」というケースもあり、やはりサイトに応じて制作側が細やかに調整していくしかないと思います。

「そこまでするの?」「フォントなんて気にしなくても…」という意見もあるでしょうが、私は可能な限り徹底したいと考えています。はじめてのCMSを扱うクライアントの不安をできるだけ払拭するのが、CMS構築を担当する私の役割でもあるからです。


投稿者名 うぇびん 投稿日時 2017年01月19日 | Permalink

国内CMS7種のナビゲーション機能を比較してみた・2016年歳末版


これまでのコーポレートサイトのCMS構築において、ナビゲーション機能は重要度が高くありませんでした。公開後に変更されることが少ないので、HTML直書きでも充分だったのです。

しかし、コンテンツマーケティングの考え方が普及し、サイト公開後もナビゲーションの導線変更を検討するケースが増えてきました。
現時点の、日本国内の主要CMS6ブランド・7種類の「ナビゲーション機能」について改めて見直してみました。

2016-12-30追記

ユーザーの皆さんから情報をいただき、下記を修正しました。
不備が多く申し訳ありません…m(__)m

  • Movable Type: Object Treeプラグインの情報を追加
  • a-blog cms: ナビゲーションのカスタマイズについて追記
  • concrete5: フラットビュー、ページ検索機能について追記
  • baserCMS 4: ブログ・フォームを複数追加について追記
  • Drupal: 「リンクの一覧」画面について追記

投稿者名 うぇびん 投稿日時 2016年12月29日 | Permalink

望みのパーツをどこにでも。制作者も更新担当者も幸せにする、a-blog cmsの「カスタムユニット」の使い方


CMSで更新する予定のコンテンツで、上の画像のように
「『お客様の声』や『ボタン』のパーツを、本文中の好きな場所に表示したい」
と要望があったら、どう対応しますか。

カスタムフィールドだと、表示位置をあらかじめ固定しなければなりません。
WordPressの「AddQuicktag」や、ウィジウィグのテンプレート機能は、HTMLを編集できるためページが崩れる危険性が高くなります。

ブロック単位の編集ができるCMS、concrete5や、WordPressのプラグイン「Page Builder」なら解決するように思えます。しかし、いずれも独自の入力欄を持ったパーツを作ろうとすると、専用のプログラムを書くことになり、制作コストがかかります。



a-blog cmsはバージョン2.1から、自作のユニット(パーツ)を追加できる「カスタムユニット」機能が追加されました。

冒頭のような要望を簡単に実装でき、制作者・更新担当者をどちらも幸せにする、おすすめの機能です。使い方を詳しくご紹介します。


投稿者名 うぇびん 投稿日時 2016年05月13日 | Permalink