桐株式会社の開発者ブログ

レガシーな不動産建築業界をITの力で変えたい

定番フォントから見る最新フォント

初めまして、BPMtechデザイン担当の奥山です。
テックチームでブログを書いていこう!ということになったので、他のメンバーとはちょっと違う(グラフィック寄りの)デザイナー観点から、最近のWEBデザイン事情について書いていこうと思っています。

今回は『定番書体から見る最新書体』とさせていただきます。
僕は前々職まではグラフィックデザイナーとしてお仕事をさせていただいていましたが、自分のやりたいこととは方向性が違った為に一度業界から離れました。 しかし縁があり今年再びグラフィック・WEBデザイナーとしてBPMtechチームでお世話になることになり、日々奮闘しております。

久しぶりに業界に帰ってきてみると、やはりレガシーでスタンダードな書体は引き続き使われているものの、フラットデザイン・マテリアルデザインの普及によって、あまり目にしなかった書体が目立ちました。 それはどれもサンセリフで視認性・可読性がよく、シンプルな骨組みに幾何学的なエッセンスが加えられているものでした。

そこで、これまでのデザインで使ってきた書体から、これから自分がデザインしていく上で役立ちそうな書体まで、独断と偏見たっぷりでピックアップしてみようと思います。


1. 太古からのスタンダードサンセリフ

古くから現在も愛され続けるサンセリフ書体たちを紹介します。デザインをやっていたら、必ず1度は使っているでしょう。 どの書体も可読性がよく輪郭がシンプルですね。

Helvetica Neue

f:id:s-okuyama:20170721105857p:plain Designed by Eduard Hoffmann in 1957 ( Original Helvetica )
サンセリフといえばコレ。目にしたことがない人はいないでしょう。世界中のいたる所で使用されています。 1957年に手組み用活字書体Neue Haas Groteskとしてデザインされ、以後ファミリーを加えてHelveticaとして発表されました。
可読性・視認性・判読性において最高ランクであり世界で一番売れている書体と言われても頷けます。 書体の面白さ、設計の精密さに気づき始めたとき、必ず誰もが一度は恋をする書体だと思います。
しかしその反面、スタンダードになりすぎてもうこの書体にはオリジナリティーやパワーはありません。 某アパレルチェーンの6日間だけの炎上新ロゴのような、書体主体のロゴなどには現在は適していないと思います。


Akzidenz Grotesk Next

f:id:s-okuyama:20170721105945p:plain Designed by ??? in 1896? ( Original Akzidenz Grotesk )
Akzidenz Groteskは19世紀にデザインされた書体で、実は未だにデザイナーや生い立ち等が謎に包まれたままです。
上記のHelveticaの元になったとも言われています。確かにHelveticaと似てはいますが R C Q 等に特に特徴があります。 Akzidenzの方が若干野蛮で力強い印象を受けます。 Helveticaよりもこちらの方が僕は好きです。皆さんもマクドナルドでよく目にしているはず。


Futura

f:id:s-okuyama:20170721110057p:plain Designed by Paul Renner in 1923
1923年にドイツのバウハウスにおいて非常勤講師として勤めたPaul Rennerによりデザインされ、今日一番目にするジオメトリック・サンセリフ書体です。
鋭く尖ったコーナーとまん丸なカーヴが特徴的で可愛らしいながらも。とても力強い存在感を持った書体です。
その可読性の高さから計器などに使用されはじめ、NASAアポロ11号に設置した盾章にFuturaを使用しました。 実はBPMtechのオフィスが入っているビルの内装はFuturaで統一されてたりします。 僕は今でもよく使いますFutura


Avenir Next

f:id:s-okuyama:20170721110106p:plain Designed by Adrian Frutiger in 1988 ( Original Avenir )
Futuraと同じ「未来」を意味するAdrian Frutigerによってデザインされた書体。 実は、この書体は好きではありません。同デザイナーによる人気書体「Frutiger」も苦手なことから多分この方のバランスは自分に馴染まないようです。
なぜ載せたかというと、デザイン会社で勤めていた際にクライアントからの要望で指定が入ることが多いためです。
しかしこの書体、縦の比率を110%に設定してやって少し縦を伸ばしてやると、とてもスッキリとした使いやすい書体と変身します。 僕は使う時はそうやって使っています。実はスターバックスで使われている書体はこれなんですよ〜!知ってました?


Din Next

f:id:s-okuyama:20170721110111p:plain Designed by Deutsche Industrienorm in 1931 ( Original Din 1451 )
ドイツ工業規格のためにデザインされた書体。この書体は一番思い入れのある書体で、過去に僕がドイツのレコードレーベルからレコードをリリースした時、ジャケットに使われていた書体がDINでした。
それまでHelveticaこそ最高の書体と夢中だった僕は、その極限まで削ぎ落とされかつ精密な錯視に衝撃を受けました。 Helveticaはとても美しい書体でしたが、なによりDINは「カッコイイ」書体でした。 この書体に触発されて、僕も書体制作をするようになりました。
1995年にAlbert-Jan Poolによりフォント化されると、すさまじい勢いで世界中に広まり今日ではHelveticaを脅かす勢いで目にするようになりました。





2. デザイン事務所時代に多用していたサンセリフ

この時僕はエディトリアル・デザイナーとして主に本や雑誌・カタログなどのデザインをしていました。この時代のサンセリフ書体達は、既存のスタンダードな書体を洗練させたようなものが多かったイメージです。

Gotham

f:id:s-okuyama:20170721111340p:plain Designed by Tobias Frere-Jones in 2000
GothamはHoefler & Frere-Jonesが2000年に、アメリカのメンズファッション誌GQのために制作した書体です。 オバマ元大統領のウェブサイトに使用されたで一気に認知度が広まったようです。
とても力強くどっしりと安定感のあるジオメトリック・サンセリフで、ロゴやタイトル、看板等にとても適している書体です。 近年のフラットデザイン及びその派生デザインによく馴染み、強く印象つけることができます。 またThin等細身のウェイトは、その輪郭の綺麗さが顕著に現れまた違った美しさを持っています。


Gotham Narrow

f:id:s-okuyama:20170721111351p:plain Designed by Tobias Frere-Jones in 2000?
Gothamのファミリー。少し横幅を縮めデザインされていて、とても使い勝手がよく僕はこちらの方をよく使用します。 字間を大きくとった時にもとてもバランスがよく美しい。


Akkurat

f:id:s-okuyama:20170721111406p:plain Designed by Laurenz Brunner in 2004
この書体の登場は衝撃的でした。というかショックでした。
当時僕は、DINにHelveticaの美しさを融合した、新しいサンセリフ書体を作り出そうと毎日設計に励んでいました。 そんな時スイスのLaurenz Brunnerによってリリースされたこの「Akkurat」はまさに僕の目指していた書体でした。 いや、それどころか何倍も、完全に上回ったパーフェクトな書体でした。(その当時の僕の中では) これ以降、可読性を軸にしたサンセリフの制作はしなくなりました。
BPMtechではコマンド画面の欧文書体にAkkurat Monoを使用している者が2名います。
大変美しく、元気いっぱいな書体ですがまだまだ知名度は低いようです。 主に建築アート系の書籍のカバーなどでよく目にしますが、広告などで目にしたことはありません。


Replica

f:id:s-okuyama:20170721111431p:plain Designed by Norm in 2008
スイスのデザインユニットNormによってデザインされたReplicaは、往年のスタンダードなサンセリフの姿を骨組みにしながらも、コーナーが面取りされていたりと遊び心がクールな印象を醸し出しています。
コーナー面取りによって輪郭がボケますのでロゴ等に特に適した書体だと思います。
日本では雑誌POPEYEがリニューアルでReplicaを使用するようになりましたね。発見した時は何故か嬉しかった。


Unica Haas

f:id:s-okuyama:20170721111450p:plain Designed by Alfred Hoffmann? in 1973?
HelveticaとUniversの融合をコンセプトに開発されたらしい書体。Helveticaより柔らかくクリアなイメージで、力強さはないもののとても使いやすい書体です。
美しく出来上がったものの、どっちつかずで中途半端だった為かほぼ使用されることはなく、お蔵入りとなっていました。
2015年にNeue Haas Unicaとして再デザインされ知名度は上がったものの、やはりまたここでも中途半端さのためわざわざ購入する人が少ないのか、街で見かけたことはありません。





3. BPMtechチームに入ってから気に入っているサンセリフ

WEB技術の進化は目まぐるしくデザインはかなり変化がありました。特にフラットデザインを軸にしたデザインの普及によって、以前にも増してジオメトリック・サンセリフ書体の需要が高まったと思います。
しかしフラットデザイン自体がとてもミニマルでクールな雰囲気を出してしまうので、それを緩和するためか新しくデザインされた書体たちは、どれも幾何学的なフォルムに人間味のような暖かさを与え、うまく崩されています。

Brother 1816

f:id:s-okuyama:20170721111500p:plain Designed by Ignacio Corbo & Fernando Díaz in 2016
サンセリフ書体が作られて200年を記念して、WEB用にデザインされたジオメトリック・ヒューマニック・サンセリフです。
非常に多くのウェイトや異字体が収録されているので様々なシチュエーションに対応することができると思います。 どっしり・しっかりとした軸に少し古典的なスパイスを投入し、優しい崩れがとても好印象です。 シンプルになりすぎてしまったミニマル・フラットデザインに温かみを与えてくれるでしょう。


Brandon Grotesque

f:id:s-okuyama:20170721111511p:plain Designed by Hannes vonDöhren in 2010
こちらも比較的新しい書体。ジオメトリックで可読性を重視したデザインです。
エレガントかつインパクトを持ち合わせていて、字間を開け気味で大文字での使用がとても印象的です。 上記のBrother 1816とはまた違った柔らかさがありますね。


Roboto

f:id:s-okuyama:20170721111524p:plain Designed by Christian Robertson in 2015
GoogleがモバイルオペレーティングシステムAndroid用のシステムフォントとして開発したネオグロテスク・サンセリフ書体。
久しぶりにAkkurat以来の衝撃がきたような気がします。いつか僕が夢描いていたHelvetica ( Condenced ) と DIN の融合、これに極めて近い。素晴らしい。 そして何が素晴らしいって、これがGoogle Fontよりフリーでダウンロード出来るのです。 今後積極的に使っていきたい書体です。


Railway

f:id:s-okuyama:20170721111538p:plain Designed by Multiple Designers in 2010
大きめのボディに細身のラインが美しいRailwayもGoogle Font。フリーです。
太めよりも細めのウェイトでダークな背景になんかすごく映えるはずです。


Lato

f:id:s-okuyama:20170721111553p:plain Designed by Urs Lehni & Lex Trüb in 2009
ポーランドのŁukasz Dziedzicによってデザインされた書体。Google Fontの中では比較的話題に登っているようですが、Gill Sansに似た…と言っている方が多かったのですが、僕はあまり似ていないと思ってます。
細部まで洗練されたフォルムはGillのそれとは全く違います。可読性に優れた最先端書体として活躍の場はたくさんあるでしょう。フリー。





4. (オマケ)使ってみたいサンセリフ

最後に、気になっている使ってみたいサンセリフをピックアップ。

LL Brown

f:id:s-okuyama:20170721155307p:plain Designed by Urs Lehni & Lex Trüb in 2010?
ジオメトリック系のサンセリフでリクライニングというItalicと逆向きの斜体があるのが特徴です。
なによりリリースイメージが秀逸すぎます。誰でしょうか。大きく印刷して部屋に貼りたいくらいですね。


LL Circular

f:id:s-okuyama:20170721160416p:plain Designed by Laurenz Brunner in 2013
AkkuratのLaurenz Brunnerがデザインした新しい書体です。やはりこの方のデザインする書体はとても洗練されていて息を飲みます。
ジオメトリックの割合が絶妙で使い場所を選ばなそうです。


独断と偏見でいろいろとフォントを語らせていただきましたが、いかがでしたでしょうか。 これからのデザインに役立つフォントが見つかれば幸いです。

桐株式会社ではエンジニアを募集中!

さいごに、桐株式会社ではレガシーな不動産建築業界をITの力で変えたいエンジニア・webデザイナーを募集しております! まずはランチなどでお話しませんか?お気軽にお問い合わせください。

DynamoDBのORマッパーのDynamoidの使い方(導入編)

はじめに

こんにちは。rsoooです。

前回はいきなりネタシェルコマンドを解説してしまったので、 今回はもうちょっと現在開発で使用している、Ruby on Railsに関連した内容をお話しようと思います。

現在開発しているコンタクトセンターサービス ナオシテというシステムで、新たにAWSDynamoDBの使用を始めましたので、そのORマッパーとして知られるgemのDynamoidを使用してみましたので、その内容と導入手順を簡単にご紹介します。

DynamoDBとは

説明するまでもないかもですが、AWSの提供するスキーマレスのフルマネージドデータベースサービスです。いわゆるKey-Value型のデータベースに分類されますが、ざっくり言うと、こちらが要求したいアクセス性能を指定してやれば、AWSでそれを満たすようによろしく分散してくれるので、簡単に構築、管理できると謳われています。

なぜDynamoDBを使用したか

弊社の構築しているコンタクトセンターサービス ナオシテは、設備の修繕に関するトランザクションを履歴としてすべて記録したいという要件がありました。それらのトランザクションは、大量に発生し、今後どのような項目が発生するか現時点で確定しきれないので、 とりあえず大量のトランザクションを受け切れるスキーマレスのデータベースが必要と判断しました。またナオシテはAWS上で構築されているので、親和性の高いスキーマレスのデータベースとして、DynamoDBを選択しました。*1

Dynamoidとは

Rubyアプリケーション上で動作する、DynamoDBのORマッパーです。AcitiveRecordと似たような感覚でモデルを定義してやれば、そのモデルに対するデータの読み書きを、DynamoDBのアクセスに変換してくれる機能を持っています。DynamoDBのアクセスは内部で AWS SDK(ver2) を使用しています。githubを見る限り、開発は頻繁と言わないまでも継続的に続いているようです。

DynamoDB導入

それでは、DynamoDBの使用した簡単な操作をご紹介します。

今回は、以下のバージョンで動かしております。

$cat /etc/issue
Ubuntu 14.04.5 LTS \n \l
$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-linux]
$ rails -v
Rails 5.0.0

導入

まずはじめに、AWS CLIをまだ入れてない人は、 CLIを入れましょう。DynamoDBのテーブル作成や、デバッグに必要になります。

公式にもありますが、pipが入っていれば、以下のコマンドを叩けばインストールできます。

 $ pip install --upgrade --user awscli

CLIがインストールされたaws configure でアクセスキーの設定をすれば完了です。

次に、DynamoDBをローカルで動かすための開発環境を入れます。これをダウンロードして好きな場所に展開して、以下のコマンドで実行できます。 # javaで動かすので、javaが入っていない方はjavaを入れましょう

 $ java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar

デフォルトで8000番ポートでDynamoDBが起動します。ちゃんと起動しているか確認するために、以下のコマンドで接続確認します。

$ aws dynamodb list-tables --endpoint-url http://localhost:8000
{
    "TableNames": [
    ]
}

まだテーブルを作成していないので、何も表示されないですが、上記のような応答が帰って来れば正常に起動できていることが確認できます。

Rails側の準備

それではDynamoidの設定をしていきましょう。 と言っても、公式にあるようにGemfileに以下を追記してbundle installすれば終わりです。Gemさん便利ですね。

 # Gemfileに追記
 gem 'dynamoid', '~> 1'
 gem 'aws-sdk', '~>2'

 $ bundle install

config/initilizer/aws.rb に設定を追記します。細かい説明は割愛しますが、以下のようにアクセスキーと設定値を入れてやれば大丈夫です。

Aws.config.update({
      region: 'ap-northeast-1',
      credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'], ENV['AWS_SECRET_ACCESS_KEY'])
})

  Dynamoid.configure do |config|
      config.adapter = 'aws_sdk_v2' 
      config.namespace = nil
      config.warn_on_scan = true
      config.read_capacity = 5
      config.write_capacity = 5
      config.endpoint = 'http://localhost:8000'
  end

今回はローカルのDdynamoDBを使用しているので、エンドポイントはそれを指定しています。また、namespaceを使用するとDynamoDBにアクセスする際にテーブル名に自動的にnamespaceを付与してくれます。これはDynamoidからアクセスする際にはわかりやすいのですが、それ以外のシステムからテーブルを作成したりする場合などは、かえって不便になるので、今回はnilにしました。

また、ここで指定するAWSのアクセスキーは、aws configure で指定したアクセスキーと同じものを使用してください。DynamoDBローカルは、アクセスキーごとにデータの保存先が異なるので、ここが違うとCLIからデータの確認ができません。

ここまでで、準備完了です。

モデルの作成

それでは、いよいよDynamoDBにアクセスするモデルを作っていきましょう。

すごい雑な例ですが、サンプルとしてBookモデルを作成してみます。

class Book
  include Dynamoid::Document

  table :name => "book_table", :key => :book_id

  field :title
  field :isbn

end

Dynamoid::Document をincludeしてやれば、DynamoDBとアクセスするモデルとして使用できます。DynamoDBのキーの指定は、HASHキーのみか、HASHキーとRANGEキーの複合キーのどちらかが選択できるのですが、今回はHASHキーのみを使用しています。

また、DynamoDBで扱いたいカラムをfieldとして定義します。 DynamoDBはスキーマレスなので、テーブル名とキー(この場合HASHキーのみ)を決めてやれば、後のフィールドは好き勝手に指定しても、よろしくDynamoDBは保存してくれます。

Railコンソールを使って、試しにデータを保存してみます。

$ bundle exec rails c
> book = Book.new
=> #<Book:0x007fc9c54935b8
> book.book_id = "id111" #idは適当に決める
=> "id111"
> book.title = "Effective Ruby" #fieldを決める
=> "Effective Ruby"
> book.isbn = "123456789"
=> "123456789"
> book.save

(459.47 ms) LIST TABLES - [[]]
(459.93 ms) CACHE TABLES
(102.64 ms) CREATE TABLE
(108.19 ms) PUT ITEM … 
>

これで保存完了しました。テーブルが存在しない場合、作成もやってくれます。 ちゃんと保存されたか、AWS CLIで確かめます。

# 表示を見やすくするため、jqを使用しています
 $ aws dynamodb list-tables --endpoint-url http://localhost:8000 | jq .TableNames 
[
  "book_table",
]

テーブルが作成されていることが確認できました。中身を見るために、全件スキャンを行います。

 $ aws dynamodb scan --endpoint-url http://localhost:8000 --table-name book_table | jq .Items
[
  {
    "title": {
      "S": "Effective Ruby"
    },
    "book_id": {
      "S": "id111"
    },
    "updated_at": {
      "N": "1497963748.3617456"
    },
    "isbn": {
      "S": "123456789"
    },
    "created_at": {
      "N": "1497963748.3612344"
    }
  }
]

DynamoDBに保存されていることが確認できました!

終わりに

いかがでしたでしょうか。DynamoDBのインデックスの扱い方や、Dynamoidのgemがどのように動いているかを説明しようと思ったのですが、長くなってきたので、それはまた次回にしようと思います。

記載している内容に間違い、指摘などございましたら、コメント欄に追記いただけると幸いです。

桐株式会社ではエンジニアを募集中!

桐株式会社ではレガシーな不動産建築業界をITの力で変えたいエンジニアを募集しております! まずはランチなどでお話しませんか?お気軽にお問い合わせください。

*1:ただ単に使ってみたかったという気持ちも半分ぐらいありますが

明日使えるかもしれないシェルコマンド解説

初めまして。rsoooと申します。

記念すべき技術ブログの第1本目の投稿として、私の大好きなシェルコマンドトリビアを紹介したいと思います。

(最初からそんなネタでいいのかというのがありますが)

ここでは、もしかしたら今後役に立つかもしれないトリビアシェルコマンドをご紹介します。

yesコマンド

ネタとして取り上げられるコマンドは何と言ってもまずyesコマンドが上げられると思います。yesコマンドが何か知らない方は、まずは以下のコマンドを叩いてみましょう。

 $ yes 高須クリニック

結果は省略するとして、これは何の意味があるのかと考えさせられます。 ちなみに、yes コマンドの引数を与えないと、y が出力され続けます。

真面目な回答をすると、yesコマンドをパイプすることによって、常にyesを入力するとこができるので、毎回確認入力をする必要がありません。

 # 確認入力の手間を削減
 $ yes | rm -i hogehoge.txt

それだけではありません。他に使い方としては、文章の生成とかに使えます(頑張れば)

 # 同じ文字列を100行生成
 $ yes mojiretsu | head -100

 # 長さ100の文字列xを作成
 $ yes x | head -100 | tr -d ""

また、もしあなたがシステム管理者で、かつLinuxで開発機を複数人で使用している場合、以下のようにサボっている人に怒りのメッセージも送れます。

  # /dev/pts/1 はサボっている人の仮想端末。wコマンドで調べる
  # yes "仕事しろ!" | head -100 | tr "\n" " " >  /dev/pts/1

このように便利なyesコマンドなので、ぜひ利用してください。

slコマンド

トリビアコマンドとしてはslコマンドは外せません。 残念ながら標準で入っていないので、Ubuntuの方はいますぐsudo apt-get install sl をお願いします。 sl コマンドを打ってくれればわかりますが、画面上にslが走ります。ただそれだけです。

これはls を間違えてsl と入力しないための入力補正のためのコマンドです。lsと間違えてslと打つと数秒間待たされるので、今まで考えていた作業が強制的に中断され、かなりストレスがたまります。この苦い教訓のよりコマンドのタイプミスが減ることが期待されます。

slコマンドはさらにCtrl-CによるSIGINTシグナルを無効にしているので、途中で終了することはできず、SLが走り抜けるのをただただ見守る必要があります。

上司とコンソールを開いてコードレビューなどをしている時に誤ってslコマンドを打ってしまった際にはCtrl-Zでプロセスを止めて一時停止し、後でslをkillするという回避策が有効です。

tacコマンド / revコマンド

tacコマンドはテキストファイルの行を逆順に表示してくれます。 なのでcatのもじったものだと考えられます。

 $ cat file
 a
 b
 c
 $ tac file
 c
 b
 a

revコマンドは文字列を左右逆に表示して出力してくれます。 私は今まで一度も使ったことはないですが、以下のようにすれば与えられた文字列が回文かどうかを判定できます。

 $ cat file
しんぶんし
 $ if [  `cat file` = `rev file` ]                            
 $ then
 $ echo "回文です"
 $ fi

終わりに

いかがでしょうか。他にもまだまだあるのですが、長くなりそうなので、一旦ここまでにしておきました。 明日使える知識がたくさんあったかと思いますが、ぜひ活用してみてください。

他に面白い使い方がありましたら教えていただけると幸いです。

桐株式会社ではエンジニアを募集中!

桐株式会社ではレガシーな不動産建築業界をITの力で変えたいエンジニアを募集しております! まずはランチなどでお話しませんか?お気軽にお問い合わせください。