読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

韓国のNAVERはココが違う!NAVERが提供するWEB標準開発ガイドやソース付きUIパターンもご紹介!

 

 

日本でもどんどん認知度を上げているNAVER(ネイバー)

 

日本では検索エンジンって聞かれると、GoogleやYahooを思い出しますが、

韓国では、NAVERDaumなどが普通です。

 

今回は、韓国のNAVERで提供しているWEB標準開発ガイドやUIパターン

その他のサービスなどを紹介したいと思います。

( 完全に韓国のサイトなので、日本語に翻訳機能を使うのをオススメします。

 翻訳に間違いがあるかと思います。ご了承ください。)

 

NULI  - 広く共有するWEB標準開発ガイド

http://html.nhncorp.com/

ヌリって読むのかな?ちなみにNULIは韓国語で「広げる」という意味です。

f:id:webarekore:20130110140131p:plain

 

メニューは英語で書かれているので、問題ないかと思いますが、

一応、カテゴリの説明です。

 ( ちなみにサイト内の右下にある設定ボタンが結構面白い。)

 

UIO FACTORY : マークアップ開発者の利便性のために、

          良く使われているUIOを集めているアーカイブ

         (UIO GeneratorやUI Pattern、Commonで分かれています)

・MARKUP TOOLS : マークアップや開発の際、

            役立つマークアップルールやツールなどを提供

HTML5&CSS3:タグ毎の説明や利用環境などが確認できます。

・BLOG:開発関係の記事や開発中の過程を紹介しているブログ

・A11Y:NHNのWEBコンテンツアクセシビリティガイド


 


では、さっそくUIO FACTORYから見てみます。

 

UIO FACTORY

 ページ内の一番上部のボタンですべてのファイルをダウンロードすることもできます。

 

f:id:webarekore:20130110140349p:plain

 

 

たくさん用意されていますが、例としてBoxをみてみましょう。

f:id:webarekore:20130110140430p:plain

 タイトルと内容、右側に詳しく見るのテキストが入っている一般的なボックスです。

CSSHTMLのコードが見れるので、とても便利です。

下部の右側のボタンで新しいウィンドウで見ることもできます。

 

一個ずつ紹介するときりがないので、その他はスクショで紹介します。

 

Menu

 

f:id:webarekore:20130110140951p:plain

 

Etc.

個人的にオススメするのは、こちらの「Etc.」!!

 

f:id:webarekore:20130110141011p:plain

グラフやタグクラウド、サッカーのフォーメーションもあるので、

今度のデザインの際に参考にしたいですね。

 

Comment Box

f:id:webarekore:20130110141031p:plain

コメントボックスを色々な形で提供しています。

 

 

Markup Tools

f:id:webarekore:20130110141230p:plain

内容は韓国語ですが、タイトル名は英語なので、カテゴリの紹介だけさせていただきます。各ツールにスクリンショットが含まれているので、見ながらやると問題ないかとおもいます。もし質問がある方はコメントでお願いします。

 

・N-WAX : Firefox用とChrome用で分かれています。ウェブページのスクリプトや

      要素など、動的に構成されているページをチェックできるツールです。

・イメージ最適化分析(Image Optimization Checker):サイト内のイメージ(jpg,png)に

 不必要なデータが入っているかどうかチェックできるツールです。

・Coding Convention:マークアップのガイドラインのようですね。

              なぜか、見れなかったです。

・Font Simulation:フォントのサイズや背景色との比べ、リンクなど

           テキストのデザインする際に良さそうですね。

・N-MET:windows用とMac用があり、CSSやHTML、CSS Spritesなどを

      NHNのマークアップに合わせてコードを整列してくれます。

・NUF(NULI UIO Factory) Dreamweaver Extension:DW上でNUFへの接続ができるようにしたプラグインです。ライブラリみたいなものですかね。

・NUF(NULI UIO Factory) EditPlus:EditPlus上でNUFへの接続ができるようにしたプログラムです。

・Markup Complexity Checker:HTMLページの平均DOM Nodeネスト数をレベルとして表示し、レベルはDOM Nodeネスト数の平均値(レベル0)を基準に、入れ子になった数が少ない(性能が良ければ)高くなってネスト数が大きい(性能が悪ければ)低くなりま す。

 

 

BLOG

ブログにもたくさんの情報がありますが、韓国語ということが、難しいところですね。

翻訳してみると意外とスムーズに読めたりもするので、良かったら見てみてください。

 

ちなみに個人的に注目の記事はこちら

「Voice Overの使用方法」- http://html.nhncorp.com/blog/1115205

設定方法や機能など結構詳しく紹介されています。

 

 

たくさんの機能やツールがそろってますよね。

デザインで困った時など、ぜひ参考にしてみてください。

 

 

 

続いては、韓国のNAVERで提供している独自のサービス

いくつかご紹介します。

 

ちなみにNAVER JAPANで提供しているサービスはこのくらい。

f:id:webarekore:20130110141616p:plain

結構アプリ系の提供が多いのですね。

 

韓国では、このくらい。

f:id:webarekore:20130110141641p:plain

 

 

その中でも個人的な好みで集めてみました。

 

1.「美術検索」- http://arts.search.naver.com/

f:id:webarekore:20130110141730p:plain

作家や解説、年度など様々な美術品の情報が検索できます。

 

2. 「NEWSSTAND」 - http://newsstand.naver.com/

f:id:webarekore:20130110141818p:plain

結構新し目のサービスですが、各新聞社の記事などを確認できるサービスです。

デザイン的にもすごく好きで、表紙を見るだけでも重要な情報が取れるので便利です。もちろん韓国語ですけど。

 

3.「ニュースライブラリ」

       - http://newslibrary.naver.com/search/searchByDate.nhn

f:id:webarekore:20130110141921p:plain

今までの新聞の記事を確認できます。1923年の新聞が一番古いんですかね?

図書館にいるみたいですね。

 

4.「NAVER MUSIC」 - http://music.naver.com/

f:id:webarekore:20130110141954p:plain

ミュージックサービスも提供しています。デザインやUIがかっこいい!

 

5.「健康:薬の形で探す」

       - http://health.naver.com/drug/pillIdentifier.nhn

f:id:webarekore:20130110142027p:plain

薬の形や色中の線などで探している薬が見つけたり、持っている薬がどんな薬か確認することができます。

 

この他にも良いサービスがたくさん!

NAVER JAPANももっとWEBよりのサービスをどんどん出してきて欲しいですね。

 

みなさん、制作の際にぜひ参考にしてみてくださいね!