structure
Design

カラムレイアウトを知るべし

Image by DjR Pictures

[山形師匠のお言葉]
カラムレイアウトはWebデザインで最もベーシックなレイアウトパターンの1つです。
カラムとは画面を横に分割された縦に伸び縮みする領域の事です。カラムの数と配置位置によって得られる効果を学んでください。

[森田]
分かりました!カラムですね。
そういえば普段何気なくネットサーフィンしてるからそこまで注目したことなかったです。早速まとめてみます!

■1カラムレイアウト

calams-1apple
http://store.apple.com/us
980px
まずはいつもお世話になっているApple Store。
商品がスッキリと見やすく、それぞれが目に留まりやすいです。

calams-1kitkat
http://kitkat.com/android/
980px
こちらはKitKat Break LABSのサイト。
ワンページで、スクロールによる動きが楽しいです。
今すぐコンビニに行ってKitKat買いたくなります。

calams-1shu
http://brand.shuuemura.jp/ultime8/
960px
そして個人的欲求に基づきshu uemuraのサイトです。
商品説明を下まで読むともう限界です。

ここまで1カラムレイアウトを見てみました。1つのページを最大限に使えるというのが強みですね。広々としたレイアウト、商品に対する理解を深めたりするのに効果がありそう。

■2カラムレイアウト

calams-2amazon
http://www.amazon.com/
200px  900px
ショッピングサイトの大手Amazonです。あえてアメリカ版。
膨大な商品の中から欲しいものを探す時にはカテゴリ検索が便利ですね。同じカテゴリ内で思わぬ掘り出し物を見つけたり。

calams-2adobe
http://www.adobe.com/products/
705px  210px
これがなきゃ始まらない!Adobe製品ページ。
製品に関係する情報を右側に表示しています。
Cloud便利すぎて感動しました。

calams-2mcd
http://www.mcdonalds.com/
95px  845px
そろそろ小腹が減ってきました。マック行こう。
最小限のガイドで商品の魅力を存分に引き出しています。
バーガーアイコンがすごく可愛い。

2カラムレイアウトは、特定のショップにおけるカテゴリ分けのガイドだったりとオンラインラインショッピングの際によく見かけます。検索作業の手助けや関連情報の表示に役立ちそうです。

■3カラムレイアウト

calams-3cnn
http://edition.cnn.com/
250px  420px  300px
情報盛りだくさんなアメリカのテレビ局CNNのサイトです。
左から最新情報の目次、ピックアップニュースの紹介、広告や情報系となっています。

calams-3yahoo
http://www.yahoo.com/
135px  524px  320px
次に大手ポータルサイトyahoo!を見てみます。
左からカテゴリ、ピックアップ情報、天気や株式等の情報という区分になっています。アメリカ版はスタイリッシュですね。

calams-3niconico
http://www.nicovideo.jp/
185px  430px  350px
そして日本のサブカルチャーのたまり場ニコニコ動画です。
左からカテゴリ、その日の情報、ニュース以外の情報とてんこ盛り。この雑多さにトーキョーを感じます。

3カラムレイアウトのサイトはどこも膨大な情報量がありました。リンクの数も半端ありません。検索ではなく発信の場に活用されていますね。総合サイト向きという感じです。

 

カラムレイアウトを分析してみると、サイトの特徴や性格・それが何の為のページなのかが見えてきました。デザインする際に、こういうページだからこう見せる、といったセオリーを知っておくことはとても大事です。Webデザインの仕組みがちょっと分かってきました!

というわけで今回の修行はここまでです。押忍!

標準
2888528307_8bf6e55e31_b
Design

Web用語を知るべし その1

Image by Taryn

こんにちは!(株)ハレノヒ新人森田です。

今回からweb業界を歩んでいくための修行が始まりました。
森田の成長過程を温かく見守っていただけますと幸いです。

さて、修行第一弾としてたまわったお題は「Web用語」。
仕事をしていく上で欠かせない共通言語です。
その1では基本的な用語をまとめてみました。

■OS

・windows
489px-Windows_logo_and_wordmark_-_2012.svg

米Microsoft社開発によるOSです。Macを使い始めてからは遠ざかっていましたが、その圧倒的なシェア率は無視できず、webページのチェックなどではwindowsありきです。あとオンラインゲームには断然windowsですね。

・Mac OS X
OS_X_Logo

米Apple社開発によるMacintoshコンピュータ用のOSです。10.8までの動物名シリーズが可愛かったけど10.9からは地名になりました。デザインには欠かせない…と思ったら日常生活にも結構欠かせない存在です。この直感的操作感はたまりません。

・Linux
500px-NewTux.svg

Webサーバーのマシンに使われることが多いOS。専門分野ではないので馴染みが薄いです。フリーでオープンソースなのが特徴でLinuxをベースにしたCentOS、Ubuntu、Fedora等があるようです。

■ブラウザ

・Internet Explorer(通称:IE)
223px-Internet_Explorer_10_logo.svg

Windows付属のブラウザ。一番シェアが多いにもかかわらず表現力などがイマイチな残念な子。バージョンアップにOSの縛りがあったりとなかなか頑固でもあります。でも数の勝利なのでIEでのチェックは欠かせません。

・Firefox
Mozilla_Firefox_logo_2013

自動アップデートで最新のウェブ標準に対応、オープンソースだしカスタマイズ性も高いというイケイケな狐。何となくIEっていう固定観念のせいで手が出なかったブラウザです。もっと使えばよかった。関係ないけど火狐ってポケモンXYのアレみたい。

・Safari
Apple_Safari

OS X標準のブラウザ。iPad、iPhoneなどにも入っていて最近知名度急上昇中。画面の表現力がとても高く、描画速度も早かったりと芸術肌。正直私はフォント設定を明朝体にしてネットサーフィンしたらゴシック体にしばらく戻れませんでした。ふつくしい…

・Chrome
648px-Google_Chrome_icon_and_wordmark_(2011).svg

Google開発のニューフェイス。シンプル、クイック。このサクサク感は他にはない!さすがGoogleさんです。会社の新しいPCにまずChromeをインストールするところから始めた私です。拡張機能なるものもあるようで、そのうち使ってみたいところ。

・Opera
Opera_browser_logo_2013

ノルウェーのオペラ・ソフトウェアが開発しているブラウザ。動作が軽いらしいけどシェアの少なさからか自分にとっては名前だけの存在になってます。音楽サービスに強いとかあったらいいのに。オペラだけに。

■html
512px-HTML5_logo_and_wordmark.svg

ハイパーテキストマークアップランゲージが正式名称。ウェブページを作るための言語です。私がデザインから離れてる間に気づいたらHTML5きてました。これからその違いをいやというほど味わうことになるでしょう。美しいコードはもはや芸術です。

■css
css3

htmlで作った構造を装飾するための言語です。昔はhtmlで色々いじってましたが、もう出来なくなるんですね。でもやっぱりCSSを使った方がスッキリするしメンテしやすいです。

■JavaScript

・jQuery
524px-JQuery_logo.svg

出ましたjQuery。気づいたらFlashがなくなっていて代わりによく聞くようになったこのjQuery。Javascriptのライブラリの1つで、これがあれば専門家でなくともJavascriptを簡単に記述できるようになるわけです。使ってみたくてうずうずしてます。

■Cookie
Koekjestrommel_open

うわーおいしそう!ではありません。ユーザーIDやショッピングカートの中身を覚えてくれていたりするニクい奴です。履歴と一緒に消したりするとそのありがたみが身に染みます。

■サーバー

・Apache(アパッチ)
169px-ASF-logo.svg

サーバーに関しては全く知識がないので師匠にご教授していただきました。Apacheとは最も人気の高いWebサーバソフトのようです。Webサーバーの半数以上がこれで運用されているとかいないとか。名前の由来はネイティブ・アメリカンのアパッチ族からきているようです。

・Nginx(エンジンエックス)
NginxLogo

エンジンエックスって読むんですね。こちらはパフォーマンスに優れているらしいです。Apacheの初版が1995年に対して、初版2004年と比較的新しい。あと運用率の関係もあってかApacheの方が技術的な情報が得やすいみたいですね。勉強になりました。

■HTTP

ハイパーテキストトランスファープロトコル。もはや早口言葉。webブラウザとサーバの間でコンテンツをやり取りする為の約束事のことです。ブラウザとサーバのコミュニケーション手段といった感じでしょうか。今こうしてネットしているのもhttpがあるおかげなんですねえ。

■ステージング

今回触れた中でなるほどと思った用語ザベストです。webサービス等を公開する前段階で、本番環境とほぼ同じ環境で最終チェックを行う環境のことです。以前web制作会社にインターンした時にやっていたあれか!と一致した瞬間でした。

基本的な用語でも、使ったことがあるもの・ないもの、用語は知っていてもそれが何なのか知らなかったものがありました。まだまだ修行は入り口という感じです。次回のお題を楽しみにしつつ、今回はこの辺で終わりたいと思います。押忍!

標準
Design

(株)ハレノヒ新人の森田です!

12月25日 クリスマスです。
本日株式会社ハレノヒに初出社しました新人の森田望と申します。
今、ワクワクの四文字じゃ足りないくらいワクワクしています。というのも、なりたかったwebデザイナーとしてようやく第一歩を踏み出せたからです。

 

簡単に森田の今までを振り返ってみると、
私はデザイン専門学校を出たものの、しばらく違うことをして過ごしていました。が、今年大きな環境の変化があり、それを機にこの業界に踏み込もうと改めて決心。

そんな時にハレノヒと出会ったのでした。

会社説明など読めば読むほど自分にとって非常に理想的な会社で、応募してからも募集要項を眺め続ける毎日。そんな思いが通じたのか、ご縁があって今日この日を迎えることが出来ました。

 

クリスマス。

まさにこの聖なる日がハレノヒにおける自分の最初の晴れの日になりました。これからもっと色んな晴れの日を作っていくべく、先輩方にビシバシ鍛えられていこうと思っています!

そんな森田の修行の様子もこのブログでお伝えしてまいります。
どうぞよろしくお願いします!

標準
kozo
Development

はじめまして(株)ハレノヒCTOの山形です

2013年が終わろうとしているこのタイミングで弊社もブログを始めることになりました。
はじめまして株式会社ハレノヒで開発を担当している山形孝造と申します。

もうすぐ弊社は設立一年が経とうとしていますが、僕が本格的に参画したのは6月からですので僕的にはあっというまに半年が経ってしまったなという感じです。

元々自社サービスを作り収益化していくことが会社設立の目的のひとつでもあるので何が何でもサービスをローンチしたいところですが未だ発表できていない状況です。
来年こそは早々にサービスを開始しインターネットの歴史に爪痕を残せればと意気込んでいます。

というわけでこのブログでは技術的なこと、主にRuby on Railsに関連したTips等を紹介していければと思います。

それではよろしくお願いします!

標準