株式会社ユープラス|youplus Inc.

「あたらしいふつうを、つぎつぎと。」を企業ミッションとして、法人個?

19/12/2017

インタラクティブ動画制作プラットフォーム「MIL(ミル)」

株式会社ユープラスは、インタラクティブ動画制作プラットフォームであるMIL(ミル)を、正式にリリース致しました。

▽MILサービスサイト
https://mil.movie/

お蔭様でβ版の登録社数は50社を超え、様々な企業様にご利用頂きました。ご協力いただいた企業様、誠に有難うございます。さて、正式リリースに伴いまして3つ報告させてください。

▼1.MILによる数値実績
MILで作成したインタラクティブ動画の最大実績でいいますと、以下のように、外部サイト誘導率では通常あり得ないような高い数値も創出できました。

・インタラクション率(タグのタッチ率):61%
・外部サイト誘導率:39%
※両方共に分母は視聴者

このような数値は、MILブログで今後も公開していきますので、是非ご覧ください。

▽MIL blog:http://blog.mil.movie/

▼2.β版からのバージョンアップ内容
・定額プランなどのクレジット決済周り
・オプション(視聴回数、CDN)の導入
・オリジナルレポーティング機能
・Google Adwordsタグ設置機能
・β版からのUI/UX改善

タグの設定も、以前に比べると非常にわかり易くなっていますので、進化したMILを是非ご利用ください。

▼3.「初期費用無料」キャンペーン
リリースに伴い、キャンペーンも始めました。今なら初期費用が無料になりますので、これを機会にMILをご利用ください。

▽キャンペーン案内:https://mil.movie/

最期に、MILの目標としては2018年12月までの1年間で「500社導入・1500動画の保有」、国内のインタラクティブ動画プラットフォームサービスでは圧倒的No.1を目指していきます。

日々皆様に、ご利用いただけるサービスになるよう精進してまいりますので、引き続き、ご愛顧のほどを宜しくお願い申し上げます。

mil.movie MIL(ミル)は、視聴者にとって再生されるだけの動画から、アクションを促す動画へと変化させる”日本初のインタラクティブ動画制作プラットフォーム”です。インタラクティブ動画制作までは無料でご利用頂けます。

23/08/2017

MIL(ミル)

本日、弊社プロダクトのMIL(ミル)β版をリリース致しました。

MIL(ミル)は、視聴者にアクションを「促す・求める」ためにインタラクティブな動画を制作するサービスです。

ユーザーは動画上で気になったポイントをタップ/クリックするだけで、すぐに詳細な情報を得ることができます。

また、ストーリー分岐、目次機能、終了画面のレコメンド設定などエンゲージメントを高めるための様々な仕掛けを設定することができます。

現在、先着50社様限定でMILβ版をご案内しています。
下記サービスサイトよりアカウントを発行後にサービスをご利用ください。

▼サービスサイト
https://mil.movie/

▼facebookページ
https://www.facebook.com/milyouplus/

mil.movie MIL(ミル)は、視聴者にとって再生されるだけの動画から、アクションを促す動画へと変化させる”インタラクティブ動画編集ツール”です。事前登録いただければ、サービスリリース時に優先してご案内させて頂きますので、メールアドレスをご登録下さい。

29/06/2017

NOMURA ASSET MANAGEMENT

【クライアントワーク更新のお知らせ】
野村アセットマネジメント様のグローバルサイトを制作させて頂きました。

サイト構成はビジュアルリッチなパネルデザインのレイアウトに。
また、企業の特徴を数値化したグラフィック(NAM Graphics)を用いて強みをビジュアル訴求しています。

ぜひご覧ください。

http://global.nomura-am.co.jp/

global.nomura-am.co.jp Nomura Asset Management aims to become a trustworthy asset management firm providing excellent service to our customers.

06/06/2017

「5days DESIGNCHAMPIONSHIP 2017」インターンシップ | 株式会社オープンハウス・ディベロップメント

【クライアントワーク更新のお知らせ】
「東京に、家を持とう。」のキャッチコピーを掲げるオープンハウス・ディベロップメント様のインターン採用サイトを制作させていただきました。

コンペに勝ち抜いた学生の作品は実際に商品として建築される夢のある企画です!

ぜひご覧ください。

https://oh.openhouse-group.com/recruit/intern/5days_2017/

oh.openhouse-group.com 実際の住宅設計業務を体験できる、5日間のインターン「5days DESIGNCHAMPIONSHIP 2017」byオープンハウス・ディベロップメントコンペを勝ち抜いたプランが本当に建築・販売されます。優勝チームには報奨金100万円を贈呈します。

06/04/2017

株式会社ユープラス|youplus Inc.'s cover photo

28/03/2017

【クライアントワーク更新のお知らせ】
ヘアアイロンメーカー、Agetuya様のブランディングを担当させていただきました。コーポレートサイトのリニューアルに伴い、web用コンセプトムービーの制作・商品ビジュアルの撮影ディレクションを行い、各商品のイメージ刷新を図っています。ぜひご覧ください。

http://agetuya.com/

23/01/2017

【クライアントワーク更新のお知らせ】

ヒト×モノのコラボで“世界でここにしかない”オリジナルアイテムを提供する動画メディアMonoully(モノウリ)様のサイトを作成しました。

動画×webを実現するために、スクエア動画の導入やレスポンシブデザインを採用することで、ユーザーの様々なアクセス環境を考慮したサイト構築を行っています。

https://monoully.com/

22/08/2016

株式会社 DG インキュベーション - Work - 株式会社ユープラス

【クライアントワーク更新のお知らせ】
株式会社 DG インキュベーション様のコーポレートサイトをリニューアルしました。

各国の VC、投資家、スタートアップをメインターゲットとしたグローバルサイトです。

新サイトではブランディングの要素を強めたビジュアル構成に変更し、投資事例やチーム紹介などのコンテンツを充実させています。

http://www.youplus.co.jp/work/dgincubation.html

youplus.co.jp DG Incubation, Inc.株式会社 DG インキュベーション様のコーポレートサイトを作成しました。各国の VC、投資家、スタートアップをメインターゲットとしたグローバルサイトです。ブランディングの要素を強めたビジュアル構成、投資事例やチーム紹介などのコンテンツの充実に力をいれたサイトへとリニューアルしました。日付Aug 22, 2016タグウェブ制作参照https://www.dgincubation.co.jphttps://www.dgincubation.co.jp

02/05/2016

いただきものの素敵な食器でおやつを食べます。食器が素敵なおかげで、バウムクーヘンが食べかけであってもオシャレに写ります。

04/04/2016

制服・ユニフォームのダイイチ

【クライアントワーク更新のお知らせ】
株式会社ダイイチ様のコーポレートサイトをリニューアルしました。

「ユニフォームは働く人たちとたくさんの時間をすごします。私服とは違う、学校の制服とも違う、ちょっと変わった服です。毎回、着替えるのが楽しみになるような、働く人の笑顔を支えるユニフォームをお客様に届ける。」

そんなダイイチ様の想いをwebサイトを通して表現しました。

http://www.youplus.co.jp/work/daiichi.html

un-daiichi.co.jp の紹介ページです。ダイイチでは、白衣・スクラブ・介護服・事務服・作業服など様々な製品をご提案。外食サービス・ホテル・調理・物販・医療・介護・ワーキング・オフィス・インフォメーション・アミューズメント・警備など幅広い業界のお客様に導入していただいております。

21/08/2015

この度youplusではドローンを導入しました!写真は弊社CTOによる空撮の訓練中の様子です。

07/08/2015

暑中お見舞い申し上げます(と言いつつ明日で立秋です)。

大学生は夏休みということで、インターン生へのデザイン指導が行われています。教えかたの丁寧さから細部を大切にする気持ちが伝わってきます。インターン生も外の暑さに負けないほど熱心です。

27/07/2015

大掃除を行いまして、その打ち上げがてらに「たこパー」を開催。チーフたこ焼きオフィサー (CTO) が見事なたこ焼きさばきを見せてくれました。将来たこ焼き屋としての独立を目論んでいるようです。

インターン生が作ってくれた焼き団子と、西表島産フルーツのデザートもあわせて、みんなで美味しくいただきました。

10/07/2015

ユープラス社のみんなでバーベキューを先日行いました。お肉&お酒のおかげでテンションが上がりまくりです。

おなかが満たされたあとは、会場を移してダーツ大会。ブルが飛び交う白熱した戦いに大盛り上がりでした。

08/06/2015

久しぶりの投稿になります。

実は最近youplusではコーヒー好きのスタッフが着々とコーヒーグッズを充実させています!蒸し暑くなってきた最近では社内でアイスコーヒーを振舞うことも。

近くにお越しの際はyouplusにお立ち寄りくださいね!
美味しいコーヒーを提供させて頂きます。

01/01/2015

~謹賀新年~
昨年は格別のご厚情を賜り、厚く御礼を申し上げます。
本年もスタッフ一同、皆様にご満足頂けるサービスを心がける所存でございます。何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。

本年もどうぞ宜しくお願い致します。

12/12/2014

【アウトプットの質を高めるために】

webサイトを制作する際にユープラスではデザイナーが1人で設計・さらにはコンテンツリストの作成、いわゆるディレクション業務まで行ったりします。

デザイナーは見た目の絵を作るだけでなく、サイト設計などの上流の業務を行うことで、一貫したストーリーを持ったサイトが出来上がるような体制をとっています。

分業による機械的なルーティーンワークでサイトを作ってしまうことを避け、一人の裁量を増やすことでアウトプットの質を高め、また個人の能力も高めていく。

ユープラスが実施している取り組みのご紹介でした。

担当:阪本

08/12/2014

【JGS11月報告と立ち上げについてを少々…】担当:光岡

ちょっと更新をさぼった光岡です。。。それはさておき、まずは11月の数値報告です!添付データをご覧ください。

黄色の部分が実績です。セッション、UU、PV共に達成はできましたが、ソーシャルの反響が想定より少なかった感じですかね。。Twitter広告も始めたので、少額投資しながら費用対を見ていきたいと思ってます。

因みに、いくつかTw広告試しましたが、CPC5円、2円、エンゲージメント率15%などの成功事例もチラホラできました!ただ、全体的にはフォローを増やす施策は効果が薄く、引き続き検討する余地ありそうです。

次にピンクが12月の目標です。果たして11月対比で1万PVも増加するのか??(笑)謎ですね。。。ただ、一つ言えることとして、添付画像の下段にあるよう、SEOは限りなく順調ということです。12/6、12/7に起きたペンギンアップデートも、当社にとっては追い風になりそうです。

---
※参照:SEOラボ
【ペンギンアップデート3.0継続中】12月6日・7日も大変動を記録!順位とアルゴリズム状況教えます
http://seolaboratory.jp/rank_change/20141208852.php
---

12/1~5までは平均セッション「370/1日」ぐらいだったのが、12/6,7で512まで上昇しました。引き続き経過は見てみないと何とも言えませんが、JGS自体の評価はGoogleから高いものであるといえます。

ここからちょこっと本題です。

JGSの立ち上げはどういう風に行ったのか?これは恐らく、どのオウンドメディアでも同じことが言えるので、ほぼすべての人に参考になると思います。

気を付けたのは以下5点。
①マーケケットを把握する
②キーワードマーケティング厳密に行う
③コンテンツの設計をする
④一月の投稿する記事本数を決めてやりきる
⑤インターンを採用する

次回は、①~⑤ついて記述していきますのでお楽しみに!

28/11/2014

ひらがいたまご WABISUKE - Work - 株式会社ユープラス

【クライアントワーク更新のお知らせ】

京都美山町の養鶏農家 WABISUKE 様のサイトを公開しました。

サイト内では美味しいたまごが産まれる美しい自然環境や、そこで自由に生きる鶏たちの様子を魅力的なビジュアルで伝えています。

ぜひご覧ください!

http://www.youplus.co.jp/work/wabisuke.html

youplus.co.jp

24/11/2014

なぜ、システム開発は必ずモメるのか?

『目標という魔法の冗談』

昨日11月23日は勤労感謝の日でしたね。今年も残すところ1ヶ月強となりまして、年始に仕事で目標をなにかしら立てられた方は、そろそろ振り返りを始める時期だと思います。

目標を立てれば成果は自然に付いてくる、なんてことがあるはずもなく、達成は行動が伴ったからこそ得られるものです。目標には行動の規範が必要となり、つまり計画が道筋立てて作られたかが成果をなす鍵となります。パスワードを自分の目標にすることが一部で話題になっていますが、目標だけを先立たせたとして、自己満足感を高めることには効果がありましょう。ただ行動しない人には結局、餅を絵に描かせるだけの簡単なお仕事を増やすだけのお話であるわけです。

目標を立てることは、自分の進む道の確認に役立ちますので、一般的にとても良いことです。目指すからにはある程度挑戦的要素が含まれていることと思います。達成できたら嬉しいものですが、ときには届かないということもあるでしょう。いずれの結果にしても反省を糧にまた前に進む力にするだけです。目標が通過点であるとしばしば言われるのはそういうことだと思います。

話が自分1人で完結しているなら反省もしやすいものですが、他の人が関わるものであったなら考える必要性が一気に深刻になります。目標における利害関係者は運命を委ねている人だといっても過言ではない状態です。合理的な根拠がないのであれば誰かにその目標を心から信じさせるのは難しいですし、もしも失敗してしまったときには適切な振り返りができず、信じていた人たちへ与えてしまう失望や裏切りの気持ちは意外と大きいものです。2度目はないと考えるのは自然です。

別の見方をすると計画を合理的に根拠のあるものにできれば、失敗でもむしろプラスに働かせることもあり得るわけです。そもそも失敗したときの視点は、行動に注目が集まりやすく元の目標がどんなものであるかは大して問われなかったりするものです。そのため、目標が明確な割に計画があいまいであったなら、それは目標と呼んでいるだけで夢未満のどうしようもない戯れ言と見られてしまっても当然といえます。目標だけが天から降りてくるような環境もときどき話に聞きますが、これでは手を動かす人にとって温度差や軋轢を生むことになりなおのこと事態が深刻になるでしょう。

がむしゃらにがんばりましたというだけですべてが解決できる世界になるにはまだ当分かかるでしょう。それまでは自分の力量を正しく認識して、目標よりも計画をうまく立てられるようになっておき、挑戦する気持ちを持ち続けたいところです。

システム開発は二つとして同じものは無いところに本質的な難しさがあります。そのプロジェクトの7割は失敗に終わり、そして必ずと言えるほどもめ事はつきものとなっているそうです。しかしリスクを操れる程度には知見がすでに蓄えられており、今後もますます充実してくるでしょう。計画を立て方次第で、目標が達成できることが明らかにできる環境なのです。

関連書籍:
なぜ、システム開発は必ずモメるのか - http://honto.jp/ebook/pd_26312325.html

文責:樋口

honto.jp 「完成させたんですから費用を払ってください!」「こんなヒドい出来のシステムに金なんか払えない!」

21/11/2014

【シンプルなデザイン思考】

クライアントワークの際にあれも載せたいこの情報も載せたいと、
盛りだくさんのデザインを希望されることがしばしばあります。

しかし、ユープラスではデザインは極力シンプルに表現し、提案するようにしています。それはシンプルであることが結果的に多くのことをもたらすと考えるからです。

■シンプルは伝えたいことを明確にする
情報は多すぎても見てもらえず、少なすぎては伝わりません。最適なボリュームでシンプルに表現することがもっとも情報を明確に伝えることがでると考えています。

■シンプルはごまかしがきかない
シンプルであるがゆえに小手先のテクニックやデザインのごまかしがききません。しかし、無駄な情報を排除することはユーザーがコンテンツの本質に向き合うための最善の方法だと考えています。

■シンプルは美しい
多くの単語を用いて物事を伝えるよりも、一言で同じことを伝えることの方が難しいものです。故にそれに成功した表現は美しく情報を伝えることができます。

このようにシンプルな表現に至るまでには多くの壁が存在し、高い技術が必要とされます。ユープラスが生み出すデザインはシンプルであるが、強さや美しさが感じられる表現を目指しています。

担当:阪本

出典: db.10plus1.jp
Less is more.(少ないほど、豊かである)と提唱したドイツ出身の建築家ミース・ファン・デル・ローエ ファンズワース邸

16/11/2014

【オウンドメディアの運用結果報告】担当:光岡

ユープラスでは「Japan Girls Style」(以降JGS)というオウンドメディアを運用しています。
http://www.jgs-media.com/

サイトのリリースは7月ですが、運用がある程度固まり仕組化できたのは9月です。

当社のオウンドメディアを知ってもらうためにも、11月(11月は現状のデータに基づいた想定数値)までの「JGS」運用結果データを添付します。何かの参考になればしていただければと。。

そもそもJGSとは、『女子大生の「今」を中心とした、日本の「ファッション+ビューティ+ライフスタイル」など様々な情報を発信するWebサイト』で、1番の人気記事は「【手帳】気になるイマドキ女子大生の手帳を完全公開!」です。流入の多くは「女子大生 手帳」などのSEOとなります。

今後、2015年3月経過時点で以下を達成していきたいと思ってます。
 ・全体のユニークユーザを3万
 ・1都3県のユニークユーザを1万2千
 ・18歳-34歳を8割
 ・女性閲覧8割
 ・メディアのマネタイズ

次回は、JGS運用に携わる役割や方針について記載しますのでお楽しみに!

09/11/2014

ピープルウエア ヤル気こそプロジェクト成功の鍵 第3版

『いい仕事をするための古いのに今時の精神論』

みんなが一つの部屋に集まれば最高の成果が生みだせる、と考えるのはやめるべきです。もし何か難しい問題を解くことが使命なのであれば、なおさらです。

その理由は、思考が一個人の能力にきわめて強く依存するためです。ものを考えるときには高度に体系化された知識が必要となりますが、他人の脳と知識の体系化を行うことが今のところできないのです。

複数人が協調するということはいわば二人三脚を行っていると同じです。足の速い人が足の遅い人に合わせて前に進むことになります。道幅を広くとることはできますが力は大きくなるとは限りません。知識で補える範囲は広がりますが、知識水準のもっとも低い人が弱点となって思考力を最大限に発揮することが難しくなります。

また考えるという行為には集中力を要します。集中している状態は周囲を気にしなくなる状態です。油断したら食われる自然界で進化した生き物にとっては非常に危険な状態です。気配や音やにおいなど、気が散る要因がある状態では集中が中途半端になったり、長続きしなかったりしてしまいます。

例えばオフィスでありがちな、電話の呼び出し音、キーボードのがちゃがちゃしたタイプ音、時には話しかけられたり、後ろから画面を覗き込まれたりすることなどがあります。これらは本能で無意識に反応してしまい、集中状態が解かれてしまいます。電車での携帯電話の通話やヘッドフォンの音漏れを好かない理由は、このような異音に無意識に反応してしまうことも一因と思っています。

最悪の場合には、集中状態が途切れるということにある種のトラウマが生まれ、中断が起こりうると意識してしまうだけで、集中状態に入ることを体が拒否するようになってしまいます。大勢が部屋に集まって机を並べた状態でも集中状態を生み出すことは可能ですが、組織の効率としても個人の精神衛生においても、より良い作業環境の構築に力を注ぐべきです。

仕事を行う人が一同に会することは重要です。作業の領域が分けられている場合はその境界の妥協確認が必須です。客がいるのであれば、面会して対話を数多く行うべきです。この役割を担うことが多いため、管理役職が一つの部屋に集まるべきといういわば神話をえてして好みます。

作業として行うのはひとりの人であり、自分の知識を他人にそっくり受け渡すことができない現状です。成果は人が集まれば自然に発生するのではなく、携わる人が生み出そうという動機から始まるのです。

このあたりの内容を面白く解説した書籍に「ピープルウエア」があります。原著の初版は27年前ですが、最近でも改訂版が出るほど古典と言える内容です。チームを組んで仕事をしている人が読むと、より良い成果が上げられるようになるのではないでしょうか。

http://honto.jp/netstore/pd-book_25977438.html

文責:樋口

honto.jp ソフト開発の現場で多くの熱い共感を呼んだ名著。「人材を活用する」「オフィス環境と生産性」「生産性の高いチームを育てる」な

03/11/2014

【改めてフラットデザインについて考えてみる】

ここ最近リリースされるWebサイトやサービスではもはやフラットデザインしか見かけないと言っていいほどフラットデザインは世の中に浸透しつつあります。

今回の記事ではユープラスの公式サイトでも採用しているフラットデザインについて改めて考えてみたいと思います。

■フラットデザインとは?

そもそもフラットデザインとはWindows8が出現した頃にモダンなUIとして現れたシンプルなデザインスタイルです。

主な特徴としてはグラデーションや装飾的な要素を極力排除し、それまで主流であった立体的でリッチなデザイン表現から平面的でシンプルな表現がされるようになりました。

グリッドシステムや文字の組み方によってコンテンツを引き立てていることも注目すべき特徴の一つです。

■なぜこれほど世に広まったのか?

フラットデザインがデザインのスタイルとしてモダンであると認知されだしたことで企業のweb担当者が取り入れたがることや、デバイスの普及に伴いコンテンツの管理がしやすいレスポンシブwebデザインとの親和性の高さも理由にあげられます。

一方でフラットデザインはシンプルでミニマムなごまかしのきかないデザイン手法です。
装飾を極力排除した表現であるため、UIを脇役にコンテンツが主役として魅力的な伝え方ができますが、コンテンツとの相性によってはチープな表現になってしまうことも考えられます。

リニューアルしたユープラスの公式サイトでもフラットデザインを採用していますが、シンプルであるからこそ各コンテンツの表現には注意する必要がありました。
可読性を考慮したリッチなマージン、独自性を表現するためのカラー設計・画像選定などデザイン設計には時間をかけた検証を行っています。

この先も当分はフラットデザインの流れは続きそうですが、
ユープラスでもシンプルな表現にさらに磨きをかけて、素敵なデザインやサービスを生み出していけるよう頑張っていきます!

担当:阪本

30/10/2014

【事業戦略③~ユープラスが成し遂げたいこと~】担当:光岡

10/17の投稿で、ユープラスの「プロダクト」について記載しました。今回はユープラスが成し遂げたいことについてです。それは主に以下2つ。
 ①国内ファッションEC化率を加速させる
 ②ASEAN諸国から日本の洋服を満足して購入してもらう

---
■国内のファッションEC化率を加速させる
僕らがここで必要だと考えていることは、リアル店舗同様の試着体験をインターネットで実現するという事です。

※例えば、
①雑誌を読む
 ↓
②洋服が気になる
 ↓
③インターネットで服を買う

あり得ないことではないですが、多くの人はこの購買パターンに当てはまりません。②と③の間で必ず「店舗試着」が入ることが多いんです。理由は前回記載したので割愛しますが、インターネットでリアルな試着体験を提供できたら、お店に行けない人からインターネット経由で洋服が売れ、「ファッションEC化率を加速させる」ことに繋がると考えています。

■ASEAN諸国から日本の洋服を満足して購入してもらう
これは必然で、そもそも国内だけだとマーケットがシュリンクしている中、海外に目を向けないわけにはいきません。その中でも、現在成長著しいASEAN諸国で親日の国なら大きな勝負が期待できます。

インドネシアを2013年に視察しましたが、生活するために洋服を着ていた暮らしから、生活が豊かになることで間違いなく欲求段階が上がり、より一層お洒落に気を遣うようになるということを確信しました。

生活水準が著しく上がる中、更に条件として加わるのが、「スマートフォンの普及・Wi-Fi環境の普及」です。2013年時点でも多くの人がスマホを持ち、LINE,facebook,Twitter様々なアプリを利用していました。

5年~10年で日本の高度経済成長を迎えるといわれているインドネシア。インドネシア以外のASEAN諸国の人々が、洋服を試着しなくてもインターネット経由で安心して洋服を買える世界を僕は作りたいです。
---

とまあ、こんなことを考えているのですが、まだまだ道は遠く険しく、超えなくてはいけないエベレスト級の山がいくつもあったり、そもそも山なのか海なのか何なのかわからなかったり(笑)最近のファッション系アプリの流行りはアイコンさんのような「ファッションSNS」や「オンライン雑誌系」のサービスですし・・・

ですが我々は、繰り返しになりますが、多くの人が利用し購買のきっかけとなる「試着」という行為にポイントを絞り、お店に行かなくても同様の疑似体験が行えるようになれば、ユーザにとってなくてはならないサービスが生まれると考えています。

当社のミッションである「あたらしいふつうを、つぎつぎと。」にふさわしいサービスを構築できるよう、引き続き頑張って参ります。

25/10/2014

みなさんの良く見るウェブサイトはサクサク表示されていますか。今回はサイトを素早く表示させる技術について解説いたします。

普段なにかしらのリンクを踏んでページを移動する時、一瞬止まったような状態になったあと、場合によっては乱れた画面が現れてからそのページに切り替わっていると思います。最近のウェブサイトで、ページを移動しているのに待ち時間無しで素早く画面が切り替わるのを目にすることが増えました。なぜサクサク表示ができるのでしょうか。ポイントは「History API」と「事前読み込み」です。

画面を書き変える技術そのものは広く利用されています。これはダイナミックHTML (DHTML) と呼ばれています(死語に近く、今では周辺技術も含めた Ajax と呼ばれることがほとんどです)。DHTML を応用すると、リンクを踏んだときの画面の書き換えを必要な箇所だけ行い、切り替えを素早く見せることが可能です。ウェブサイトによっては先頭のタイトルバナーやナビゲーションなど共通なデザインが多い場合があり、このようなページでは特に効果的に高速な表示が期待できます。

利用価値が高い一方で、ただ単に書き換えるだけでは利用者に不利益を与えることもあります。その一つはブラウザの履歴機能が使えなくなることです。ページ全体を書き換えても URL は同じまま変わりません。なので再読み込みをすると初期状態で表示されますし、前のページに戻ろうと「戻る」ボタンを押すと別のサイトが表示されたりすることになります。とても残念な気持ちになります。

この問題をスマートに解決するのが一つ目のポイント「History API」です。これはブラウザの履歴情報を取り扱うことができます。画面を書き換える際に、URL の移動履歴も追加して「ページを移動したんだよ」ということをブラウザに記録させることができます。この記録機能の呼び出し名の「pushState」から、Ajax と組み合わせた技術ということで「pjax」と呼ばれています。

History API が利用可能になる以前は、この履歴の問題に URL フラグメント(URLで「 #」以降の文字列)を使って対処していました。Facebook や Twitter をはじめ一時期多くのウェブサービスが取り入れていました。しかしながらこれはウェブの原則を破るものであり、ブラウザ外でキャッシュできない、検索エンジンに優しくない、など技術的にふさわしい解決法ではありませんでした。今では History API に取って代わられています。

pjax で高速化が実現できました。しかしながらネットワーク通信による読み込みですので、必要最小限の情報であってもそのやり取りには 0.1 秒たらずともわずかな時間が必要となってしまいます。この時間さえも無くしてしまおうとする技術が「事前読み込み」です。

事前読み込みはその名の通りであらかじめ表示するページを読み込んでおくことです。これでクリックのマウスボタンを離したら即切り替わる操作感が生みだせます。単純な解決策ではありますがただ一つある問題は、見てる人が次にどのページを見るのかわからない、ということです。全てのリンク先を読み込んでも良いのですが、システムやブラウザ端末に負荷がかかってしまいこれでは本末転倒です。

そこで目を付けたのが運動科学です。パソコンのマウスでリンクをクリックするときの動きに注目します。リンクを見つけたらポインターを当てマウスボタンを押して離す、という動作です。ポインターを当ててからマウスボタンを離すまでに要するであろう数百ミリ秒の間があるのです。この瞬間にページを読み込んでしまえば、高い確率で次に見るページだけを読み込むことができます。この事前読み込み法を実装したライブラリに InstantClick というものがあります。

残念ながらこの読み込み法はモバイル端末にそのままでは当てはめられません。モバイル端末にはポインターが無いのと、モバイル通信特有の長い通信遅延で効果が薄くなるためです。ただタップ動作も 0.1 秒ぐらい要することがあるので、リンクを押した瞬間に事前読み込みを行うことで若干の速度の向上が見込めます。

以上紹介した技術は、そのほかの技術とうまく組み合わせて構築することで効果が出るものです。へたにやってしまうと変な動きをするので導入の難易度は易しいわけではないのですが、成功すれば利用者の体験が上がります。うまく取り入れて素敵なウェブサイトを作っていきたいですね。

参考:
pjax - https://github.com/defunkt/jquery-pjax
InstantClick - http://instantclick.io

文責:樋口

20/10/2014

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

今回はユープラス公式サイトのデザインについてのお話を紹介します。

そろそろきちんとした公式サイトを作ろうよと社内で案が出てから2か月ほどかけて制作した公式サイトですが、デザインにあたり特に意識したポイントを3つ紹介します。


①どのデバイスからも見やすく、回遊しやすいシンプルなサイト設計

各デバイスからのアクセスを考慮し、レスポンシブWebデザインにも対応したシンプルな導線設計にしています。
また、今回はレスポンシブWebデザインとの親和性の高いフラットデザインを積極的に採用し、過度な装飾や演出を排除することで
シンプルながらも心地良さが感じられる表現にしました。
コンテンツごとの背景色を切り分け、セクションを明確に分けることもわかりやすいサイト構成に一役買っています。


②ユープラスのことを知ってもらう

私たちの顔が見えるメンバー紹介コンテンツを設けることで
少しでもユープラスのことを知ってもらうことができるようにしました。


③ユープラスの独自性を表現する

デザインの印象付けを行う為にはキーカラーの使い方がポイントとなります。そこで私たちのテーマカラーである赤を効果的に採用するカラースキームを設計しました。また、ユープラスでこれまでに作成した作品を大胆に訴求していくことでユープラスの独自性を表現しています。


このように簡単にデザインのポイントを紹介しましたが、
ユープラス公式サイトが下記ギャラリーサイトで紹介されています。

ぜひご覧ください!

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトRESPONSIVE WEB DESIGN JP

http://responsive-jp.com/3087.html

responsive-jp.com 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

16/10/2014

【事業戦略②~自社プロダクト~】担当:光岡

9/27の投稿で、ユープラスが攻めるターゲット市場について記載させて頂きましたが、前回の投稿を簡単にまとめると、
 1.衣料,アクセサリー小売業のEC化率は1.65%と他業種に比べ非常に低い
 2.EC化率は低いものの、ECの成長率は120%越えと伸長している

ということから、現在の「衣料・アクセサリー小売業」におけるECコンテンツのあり方に問題があるのでは?と述べました。

ここからが本題ですが、『ユープラスのプロダクトは何を解決するのか?』ということについて記載します。

そもそも、インターネットで購入しづらい理由は何でしょう?数百規模のヒアリングサンプルではありませんが、ほぼ以下3つに絞られます。
 ①自分のスタイルに合うか不安
 ②コーディネートが不安
 ③素材を知りたい

今度は逆に、お店で購入する(試着する)理由を同様にヒアリングした場合は以下の通りです。
 ①試着によりフィット感を確かめることができる
 ②コーディネートのイメージがつきやすい(着合わせと店員のアドバイス)
 ③素材が知れる

そこで当社は「いつでもどこでも試着体験」をテーマに、店舗で行う試着に近い体験をスマホ・タブレット・PC問わず可能にすることで、よりEC化率が促進されるのではないかと考え、X Codé(クロスコーデ)を開発しました。

クロスコーデは②に特化した形で現在開発を進めていますが、その理由はいたってシンプルで、利用するユーザ側が楽しいからです。

・着せ替えが楽しい!
・この「トップス×ボトム」のコーディネートいい!
・ブランドが出した新商品がかわいい!

などの体験が現状できるようになっています。

■詳細はこちら
http://www.youplus.co.jp/xcode/

また、今後の実装予定機能としては、着合わせデータの統計を解析し、ユーザが選択した商品に対するオススメ商品をレコメンドする仕組みも考えています。
--------------
※レコメンド例
トップスA×ボトムB=組み合わせ総数100回
トップスA×ボトムC=組み合わせ総数 50回
トップスA×ボトムD=組み合わせ総数120回

トップスAの選択時点でボトムDをレコメンド
--------------

この機能は、ファッションにあまり自信のないユーザが、お店でスタッフにコーディネートを相談する行為の代替になると想定しています。

お店の試着行為をインターネット経由でデバイス問わず実現させていくことで、僕らが更に目指すものとは、、、「事業戦略③~僕らが成し遂げたい世界観~」で記載しますのでお楽しみに!

07/10/2014

 新しいデザインとなったユープラスのウェブサイトはご覧いただけましたでしょうか。今回はウェブサイトの技術面についてお話しいたします。

 ウェブサイトを作るとなったときに、何はともあれコンテンツ管理システム(CMS)をサーバーに置くことが常識となっている人は多いと思います。しかしユープラスのウェブサイトはそのような CMS を使うことなく運用されています。表示するデータは手持ちのパソコンで自動生成してサーバーに置いているのです。

 前者のようにシステムが見る人の要求に応じて情報を作って配信するサイトは「動的サイト」と呼ばれ、後者のようにあらかじめ作ってある情報を配信するサイトは「静的サイト」と呼ばれています。「動的」も「静的」もそれぞれ善し悪しがあり、どちらであってもうまい人の手にかかれば良いウェブサイトが作れますが、よく採用されるのは CMS の動的サイトです。それではなぜユープラスは静的なウェブサイトを構築したのでしょうか。理由は、そこにエンジニアリングが存在するからです。

 そもそもウェブで情報を配信するためにはウェブに関する専門の知識と技術が必要でした。これはコンテンツを配信したいだけのデザイナーやライターには荷が重い領域です。そこで登場したのが CMS で、ウェブの複雑な仕組みをうまく隠し、彼らは余計な仕事から切り離されコンテンツの配信に集中できるようになりました。WordPress などの優秀な CMS では、専門の技術者でなくても簡単に高機能を組み込むことができ、仕事の幅を広げることにもつながりました。

 このように CMS はとても素晴らしいのですが、非エンジニアの要求を受け入れるのと引き換えに、システムの内部は肥大し複雑になっていきました。それゆえにコンテンツを配信するという元々の要求に応えることにおいては単純さを欠いていくことになりました。

 単純なウェブサイトにはそれ相応の適切で単純な解決策があるはずで、そのような仕組みを求めたくなるのは問題を解く者としての当然の心理です。ではそれを求めようとなった時に、目標に近づくために必要なものが技術力なのであれば、それはエンジニアリングでありそれがエンジニアの仕事となるわけです。

 開発では HTML と CSS だけでまずは作り始め、テストやステージング公開する作業の自動化を行いました。全体が見え始めたところで生産性をあげようと、HTML、CSS、JavaScript ファイルはそれぞれを生産性が高く記述できる Markdown、Less、CoffeeScript から生成させるようにしました。また JavaScript ライブラリは数が少ないながらも管理が必要なため、その解決も自動で処理させています。データを編集したら自動で再読み込みさせているので、異なる幅のウインドウを用意してのレスポンシブ対応確認作業も快適です。

 このような、求められる内容に見合った開発環境を整えられるのはエンジニアリングの楽しさです。思いのままに環境が整えられることは、依頼者の要求にも柔軟に応えられる体制であることにもつながります。

 『道具が金槌しか無い人には全ての問題が釘に見える』という言葉もありますし、いやいや大は小を兼ねるので CMS でいいのだという意見はもちろん理解できます。しかしながらこんなこともあんなこともできますという理由が CMS の上に乗っかっているからというよりは CMS 以外にもきちんとした解決策を持っているから、という方がなにかうまい仕事をやってくれそうな予感が湧いてくる気がするのです。

 技術的な話を少しして終わりになりますが、今回は Node.js を技術基盤とする Grunt という自動処理ソフトウエアを利用しました。Grunt はソフトウエア開発に使われることが多いですが、それに限定することなく様々な作業の自動化を行うことができます。

 自分の仕事をするにあたって独創性が大事なのだという言葉をたびたび耳にしますが、エンジニアが人の見えるところで自分の色を出せる機会は限られています。今回ウェブサイトが静的であることには、エンジニアの色が出せるそのような少ない機会を活かした結果でありました。

03/10/2014

株式会社ユープラス「あたらしいふつうを、つぎつぎと」

ユープラス公式サイトをリニューアルしました!

新デザインはレスポンシブ対応になっており、どの端末からでも快適にご覧いただけます。

自社プロダクトやクライアントワークも随時公開予定です。

今後ともユープラスを宜しくお願いします。

http://www.youplus.co.jp/

youplus.co.jp あたらしいふつうを、つぎつぎと。株式会社ユープラスは法人個人問わず、 多くのお客様に生活の一部として身近に感じていただけるサービスを提供します。

01/10/2014

【プロダクトデザイン】担当:阪本

ユープラスでは現在「X Code(クロスコーデ)」という洋服の着せ替えサービスを開発しています。

今回はデザイナーの観点から自社プロダクトのデザインについて紹介していきたいと思います。

自社プロダクトをデザインしていて気付いたもっとも重要なこと、それは「初期開発時のデザインは完成されたデザインでなくていい」ということです。

その理由には以下があげられます。

■開発スピードの重要性

プロダクトの改善ポイントを探すために、ユーザーテストを行うための開発スピードがなにより優先されます。

ローンチ時点でデザインに満足するようではサービスの公開が遅すぎるなんて言われるほどスタートアップのサービス開発ではスピードが重要です。

■デザイン更新の重要性

ユーザーテストで得られた結果でデザインは何度もブラッシュアップされていきます。

プロダクトのデザインではトライ&エラーを繰り返し弱点を無くす必要があり、何度も変更が加わっても耐えうる設計、デザインにしておくことが重要なんですね。

ユープラスの自社プロダクトのデザインについてのご紹介でした。

27/09/2014

【事業戦略①~ターゲット市場~】担当:光岡
これから3回に分けて、ユープラスの「ターゲット市場、自社プロダクト、成し遂げたい世界観」について簡単に紹介していきたいと思います。

■まず初めに、、、
ユープラスはアパレル業界に特化した形で『どうしたら衣料・アクセサリー群がインターネット上で購入されやすくなるか』に問題意識を置き、プロダクトを開発しています。

■アパレル市場規模
「衣料・アクセサリー小売業」の市場全体を見ると、ここ10年で9兆ほどに下がり、やや縮小傾向気味なようですが、EC市場規模(添付画像参照)をみると、他の業種よりも120%越えという高い成長を見せています。ただし、EC市場規模自体はというと、他の業種に圧倒的な差を付けられ、EC化率も1.65%と大変低い数値です。

■ユープラスの着眼点
インターネットが既存の販売スキームにとって代わり、EC市場規模は伸びてはいるものの、他の市場と比較すればまだまだという状況。。。そこで僕らは、なぜファッションECの「EC化率が低いのか?」という部分に着目し、現在のファッションECの在り方になにか問題があるのではないか?と考えました。

僕らが考える原因は、、、、「事業戦略②~自社プロダクト~」で記載しますのでお楽しみに!

『参照元:』
平成 26 年 8 月経済産業省
※平成 25 年度我が国経済社会の情報化・サービス化に係る基盤整備(電子商取引に関する市場調査)報告書

22/09/2014

【プロジェクト管理】
明日は秋分の日です。仕事のはかどる気候になってきました。

ユープラスでは各々の能力を最大限に活かすために、メンバーには大きな権限が与えられています。自由に動きながらもプロジェクトが正しい方向に向かうよう、プロジェクト管理で心がけているのは決定事項の記録です。個々の意思や判断を互いにいつでも確認できるので、安心して自分の仕事に集中できるのです。

ユープラスのプロジェクト管理についてのご紹介でした。

05/09/2014

【制作実績】
お笑いに関する様々な情報を発信する「LAUGH MAKER」のお手伝いをさせていただきました!LAUGH MAKERは「笑いの経済圏をつくる」をコンセプトにしたWebメディアです。
http://laughmaker.jp/

■制作箇所
・logo制作
・名刺デザイン
・メディアのデザイン、コーディング
・WordPress実装

現在受け入れに空きがございますので、企業様公式サイト、メディア構築に関するご相談があれば、是非以下よりお問合せ下さい!!

■問い合わせ先:[email protected]

25/08/2014

コーディネートが売り上げをつくる。 アパレルビジネスの新しいソリューション。「クロスコーデ」 - YAMAYOKO.com

【PR】
YAMAYOKOさんのブログで「X Codé」を取り上げてもらいました!ありがとうございますm(__)m

yamayoko.com 洋服写真を登録すれば、スマホで、タブレットで、PCで、実際のコーディネートがリアルに組み合わせることができる「リアル着せ替えサービス:X Codé (クロスコーデ)」というサービスを発見したのでメモを。バーチャルコーディネートサービスブランドの洋服写真を登録すれば、スマホ・タブレット・PCで、実際のコーディネートが仮想マネキンで見ることができる。お店の中で...

あなたの事業を広告マーケティング会社のトップリストShinjuku-kuにしたいですか?
ここをクリックしてあなたのスポンサー付きリスティングを獲得。

カテゴリー

ウェブサイト

住所


東京都新宿区新宿1-9-1 第2タケビル8F
Shinjuku-ku, Tokyo
160-0022

ウェブデザインのその他Shinjuku-ku (すべて表示)
螺鈿カラーズ株式会社 螺鈿カラーズ株式会社
西新宿7-20-1住友不動産西新宿ビル
Shinjuku-ku, 160-0023

Webサイト、Webサービス、アプリ、広告効果計測システム等の開発、コンサ?

Lincoln Studios Inc. Lincoln Studios Inc.
Shinjuku-ku

Communication Compass,Inc. Communication Compass,Inc.
新宿2-5-12 FORECAST新宿AVENUE 6階
Shinjuku-ku, 160-0022

株式会社コミュニケーション・コンパスの公式Facebookページです。

Valtech co.,ltd. Valtech co.,ltd.
西新宿1-25-1 新宿センタービル50階
Shinjuku-ku, 163-0650

-ソフトをハートでつくる-

ラフテルズデザイン/クレドアイテム制作 ラフテルズデザイン/クレドアイテム制作
Shinjuku-ku, 〒160-0023

ラフテルズの作品集(デザイン)

格安でホームページ制作できる アットウェブサイト 格安でホームページ制作できる アットウェブサイト
西新宿3-3-13西新宿水間ビル6F
Shinjuku-ku, 160-0023

初期費用0円。スタンダードプランの月額8,800円またはプレミアムプランの?

Pikkles Inc. Pikkles Inc.
Shibuya-ku, Udagawa-cho 6-20, Palacion Shibuya 311
Shinjuku-ku, 150-0042

Multimedia. Multidisciplinary. Multitalented.

Tell Web Design Office Tell Web Design Office
東京都新宿区西早稲田2-3-5 吉岡ビル1F
Shinjuku-ku, 169-0051

web製作やseoなど

株式会社シンクメディア 株式会社シンクメディア
神田神保町1-40 豊明ビル4F
Shinjuku-ku, 101-0051

東京・神保町と八王子にあるデザイン戦略会社。制作:ウェブ・印刷・イ?

東京・新宿ホームページ制作・印刷物デザイン制作の ピッコルーナ 東京・新宿ホームページ制作・印刷物デザイン制作の ピッコルーナ
西新宿3-3-13西新宿水間ビル6F
Shinjuku-ku, 1600023

(株)ピッコルーナは6つのサービス事業部がございます。(web制作/DTP制作/SNS運用代行/歯科・医療系支援事業/事務局運営業務など)行っております。お気軽にご相談ください。

Letters Letters
弥生町1-3/2
Shinjuku-ku, 164-0013

デザインチーム「Stronghold」を擁するWEBデザイン会社。