WebDesign Dackel

国内中心に有名Webサービス・ツールの投稿画面デザインを集めてみた

国内中心に有名Webサービス・ツールの投稿画面デザインを集めてみた

Hatena0
Google+0
Pocket0
Feedly0

いざWebサービスを作ろうとすると色々と悩むことがあります。サービス名やドメインをどうしよう、サーバはどうするか、バックエンドの言語は何を使うか、どんなフレームワークを使うかetc…。
その中でもエンジニアさんだったらかなり悩むのは「デザイン」だったりすると思います。

そんな時は沢山の人が使ってフィードバックを受けて常に改善を進めている、有名なツールやサービスを参考にするのがいいかなと考えています。自分でも使ったことがあればそのデザインの良い点、悪い点が簡単に把握することが出来ますしね!

そこで今回は、サービス内で最もユーザが使うであろう「投稿画面」にフォーカスして、国内中心に有名所のWebサービス・ツールの投稿画面デザインを集めてみました。それぞれの画像は2014.12月時点のもので、一部モザイクを掛けたりしています。

アメーバブログ

アメーバ

http://ameblo.jp/

有名人もよく使っていますね。投稿はWysiwygエディタで行う形式です。

Blogger

Blogger

https://www.blogger.com/home

Googleが提供しているブログサービス。画面はスッキリとしていて使いやすい印象です。画像のアップロード方法が充実しています。

Evernote

Evernote

https://evernote.com/intl/jp/

ワークスペースとの謳い文句で、単なるメモ帳代わりからビジネスに使ったり、画像をクリップしておいたり、様々な使い方が出来るのが便利ですね。

FC2ブログ

FC2ブログ

http://blog.fc2.com/

エディタの下にリアルタイムに編集内容が表示されます。

Forkwell

forkwell

https://forkwell.com/

エンジニアの能力を可視化してくサービス。制作物をポートフォリオとして登録していきます。登録はURLの入力から始まってカテゴリ選択やタグ付け、コメントの入力とシンプルにまとまっている印象です。

Ghost

Ghost

https://ghost.org/

WordPressほど高機能ではなく、記事を書くことに専念出来るブログツール。Markdown記法を使った編集ができます。画面が左右2分割されて、左側で入力した内容が右側画面にスタイルのあたった状態で随時反映されていきます。
個人的に管理画面全体がスッキリとしていてカッコ良いと思いました!

Google +

GooglePlus

https://plus.google.com/

Googleらしい洗練されたUIが印象的です。

はてなブログ

はてなブログ

http://hatenablog.com/

「○○の貼り付け」が豊富に揃っているし、編集も直感的に行えるので使い勝手が良い印象です。

nanapi

nanapi

http://nanapi.jp/

「nanapi記法」というMarkdown記法に機能をちょい足しした記法で編集が出来ます。画面内の余計なものを省いているので編集に集中できそうです。

NAVER

NAVER

http://matome.naver.jp/

テキストや画像、引用などのコンテンツをブロック単位で追加していく編集方法みたいです。

Qiita

Qiita

http://qiita.com/

先述したGhostと似た編集方法で、左右分割された画面が分かりやすいです。

Teratail

Teratail

https://teratail.com/

今年出来たばかりのエンジニア向けQ&Aサイト。質問の投稿にはMarkdown記法が使えます。

Tumblr

Tumblr

https://www.tumblr.com/

↑載せている画像、非常に分かりづらいですね。笑
テキスト、画像、リンク、引用、動画などの形式によってそれぞれ投稿形式が用意されています。サクッと投稿が出来る印象です。関係無いですが、個人的にTumblrのログイン画面はとっても好みです!

WordPress

WordPress

https://ja.wordpress.com/

このブログでもお世話になっているブログツールです。単純なブログから企業向けサイトのCMS、Webサービスなどかなり手広く活躍していますね。
慣れていれば記事の編集は簡単に思うのですが、友人のブログをセットアップした時、使い方について色々と尋ねられました。画面に表示されている項目が多いし、機能が多いので、こうしたツールをあまり触ったことが無い人にとっては取っ付きにくいのかも?なんて最近思いました。

まとめ

一般の方、エンジニアなどサービスの対象となるユーザに合わせてや編集方法が工夫されていますね! 見た目上のデザインだけでは無く、簡単に、便利に、楽しく使える様にそれぞれの良い点を参考にしつつ、これから作るサービスの参考にしてみてはいかがでしょうか?

また気になったサービスやツールがあったら追加していきたいと思います。