ウェブを電子書籍、雑誌化したいテーブルマガジンズ。

Facebook http://www.facebook.com/maashjapan
http://www.hirata-office.jp/topic/taniuchi_risa/forest/01.html
http://www.hirata-office.jp/topic/taniuchi_risa/forest/01.html

今から8年か9年前、元々雑誌編集者だった私が、Web上で雑誌と同じデザインを表現したいと思いはじめたのがテーブルマガジンズだ。

当時は今以上にPCによって表示やフォントが異なり、Windows上では見るも無惨なギザギザフォントだった。

そこで最初に作ったのがこのShin-kuだ。

http://www.tablemagazines.com/shin-ku/
http://www.tablemagazines.com/shin-ku/

 

PCの横画面いっぱいに画像を配置し、イラストレーターでフォントを組み込んだ状態で画像をアップする。

基本的な作業は雑誌のアートディレクションと変わらない。

 

このフォーマットは次のページに進むボタンが右上にあったりと不便で、その後改良を進めた。

そして、ブラウザの大きさに合わせて画像の大きさが変わるTable 1.0が完成した。

 

http://www.hirata-office.jp/topic/tabe/praha01/01.html
http://www.hirata-office.jp/topic/tabe/praha01/01.html

 

最初に使ったのは多部未華子オフィシャルウェブのタベシャ!だったと思う。

 

これはブラウザを縦の形にしたときに、左右が切れてしまう。

なので、文字が入る場合、画像がブラウザの大きさによって切れないバージョンであるTable1.2もできた。

 

http://www.hirata-office.jp/topic/taniuchi_risa/forest/01.html
http://www.hirata-office.jp/topic/taniuchi_risa/forest/01.html

 

この頃から、タブレットとスマホで縦でウェブを見る人が増え始めた。

この時点ではスマホで見ると、画像は横なので、小さくなる。

縦でも画面いっぱいに表示させたいので、Table1.3ができた。

http://rungramercyrun.com/english/top.html

 

これはPCの横位置のブラウザだと、今まで通り表記されるが、スマホやタブレットだと、真ん中部分だけが画面いっぱいに表示される。

右の部分はスクロールで対応した。

 

そして、2013年にそれをさらに進化させたTable2.0が完成した。

 

http://www.hirata-office.jp/komatsu_mikako/
http://www.hirata-office.jp/komatsu_mikako/

 

これは、今までと一番異なる部分は、縦写真を使用したことだ。

タブレットやスマホで見るとすべてが表示される。PCの場合は、横位置にしていると上部分だけが表示され、スクロールできる。

ブラウザを縦にするとすべてが表示される。

表示としては電子書籍に近くなった。

 

先月公開したヒラタオフィスオフィシャルサイトウルウルでの、石田法嗣くんと小林涼子の対談企画は、まさにこのTable2.0の力を発揮したものだった。

http://www.hirata-office.jp/topic/hoshi_ryoko/diarogue/01.html
http://www.hirata-office.jp/topic/hoshi_ryoko/diarogue/01.html

 

ぜひレティーナクラスのタブレットで見ていただきたい。

Webは雑誌のアートディレクションの歴史を引き継ぐものだと、私は思っている。

 

テーブルマガジンズのWebデザイン Table 2.0

 

 

 

 

Similar Posts: