デザイン

MeetUpシールがとことん簡単に作れるプロダクトの話 -前編-

突然ですがシールの作り方、わからなくないですか!?

ラクスルなら誰でも簡単にデザインできるサービス担当の武政です。

弊社でもミートアップや勉強会がよく行われていますが
企画にステッカーがあると一体感がでてテンションも上がりますよね。

でも忙しい中でデザイナーさんにお願いするのは申し訳ない…外注だと予算もかかる…
そんなお悩みの声に応えて、パパッとステッカーを制作できるプロダクトをリリースしました!

オンラインデザインのシール・ステッカー・ラベルです。

  • 円形、正方形、長方形が合計9サイズ
  • シール・ステッカーのテンプレートも約300点公開(2018/11現在)

MeetUp用のシールを作ろう!

私もオンラインデザインで、リリース記念のシールを作ってみました

MeetUp用シールの無料デザインテンプレートも公開!

ミートアップですぐ使えるテンプレートも用意しました!
ぜひロゴやテキスト入れて遊んでみてください。
※画像をクリックするとオンラインデザインに遷移します

①ミートアップ:おしゃれ  (円形 直径50mm)
円形はPCに貼るには定番ですね

テンプレート編集はこちらから>>

②ミートアップ:シンプル (正方形 50*50mm)
ロゴを置いて、背景色をロゴ内の色に変えるだけでそれらしくなります

テンプレート編集はこちらから>>

シールでこんな遊び方も!?

少年時代に熱中したキラキラ風シールも作れちゃいます。
③キラキラ風シール:※ホログラム加工ではありません (正方形 50*50mm)

テンプレート編集はこちらから>>

シールになった弊社CTOもニッコリ。

シール制作プロセスの何をシステムで解決したのか?

シールのデータ制作はコンテンツとしては驚くほど簡単ですが
制作データの構造が難しいという不思議な商品です。

  • 具体的に難しいポイントは「カットパス」データの作成
  • カットパスとはシールの形に切り抜くためのパスデータのこと
  • カットパスと聞いた瞬間に印刷業界以外の方は「んんん?」となりますよね

デザイナーさん以外にはこの「カットパスの理解と制作」が難しい。
これがシール作成における「できる/できない」を決定づける障壁です。


システムが解決したシール制作者の課題は「カットパスをつくる必要がない」という部分です。
これには制作が簡単になることに加え、制作作業の大幅な短縮効果があります。

このようにしてシールが簡単に作ることができるプロダクトができました。
ぜひお試しください!
https://raksul.com/online-design/sticker/

もっとディープな技術の話は、後編をお楽しみに!
「後編:シール開発は”SVG”と”WYSIWYG”が肝だった話」

ラクスルではエンジニアを積極採用しています

ラクスルは画像処理や印刷技術、SVGに関わる開発ができるレアな環境です。
興味を持たれた方は是非一度オフィスに遊びにいらしてください!

デザイン指針の必要性

こんにちは、ラクスルでUXデザイナーをやっていますガーワルロビンです。6月にオランダのアムステルダムで開催されたUXデザインのカンファレンス2つに参加してきました。UX戦略とUXデザインに特化した「UX STRAT Europe 2018」が6月11日・12日に開催され、またフロントエンドやテックの話も少し入った「CSS DAY 2018 UX Special」が6月14日に開催されました。

左:UX Strat Europe 2018の会場;右:CSS Day 2018の会場

ラクスルは2012年からネット印刷のサービスを提供し続けてしました。この6年間の間でサービスの形は変わり、ユーザーとのタッチポイントも変わってきました。変わり続けるウェブサービスを開発するにはプロダクトの形をリードする指針が必要だと思われます。ラクスルにそう言った指針がなかったため、ユーザー体験の一貫性がなくなってきました。ユーザーにより良い体験を提供するためには、どのようにプロダクトを作ればいのか、どのような組織でどのような開発を進めれば良いのか。いままでラクスルで進めてきた方法が正しいのか?もしくは別のアプローチがあるのか?その答えを探すため、カンファレンスに参加しました。

その答えになりうる勉強になった事項のひとつは、デザインプリンシプル(以下デザイン指針)でした。このブログでは主にデザイン指針とは何か、なぜ会社に必要かと最後に良いデザイン指針を作るためのコツを紹介します。では早速本題に入って行きましょう。

デザイン指針とは

CSS DAYの登壇者の一人で「Design Systems」の著者 Alla Kholmatova はデザイン指針を次のように説明しています。

デザイン指針は、特定の製品やチームにとって良いデザインが何を意味するかという共通の基準です。

ウェブ上で出てくるデザイン指針には様々な定義があるかもしれませんが、私にとってはこれが単純でストレートです。[参考までにInteraction Design foundation

デザイン指針の必要性がどこにあるのか

デザイン指針は、プロダクト開発において組織の基準を一方向に定めるために重要です。

Brio toys

Brioが色々なおもちゃを作っている中で、一目瞭然でBrioのおもちゃであることがわかります。

複数のプロダクト間の一貫性を保つ

デザイン指針があることによって、同じサービスやブランドに含まれるプロダクトにユーザーが接するときに迷わずに動作をすることができます。 ユーザーがプロダクト間で一貫性のある経験を持ち、同じ機能が違うプロダクトで複製することができれば、タスクをスムーズに進めることができます。 この一貫性は、Atlassianの幅広い製品で見られます。 Atlassianは3つのデザイン指針を定義し、プロダクトの必要に応じてそれぞれの度合いを微調整して行きます。

アトラシアンが定義している3つのデザイン指針

アトラシアンが定義している3つのデザイン指針

時間依存性を減らす・長期間で一貫性を保つ

事業会社では同じサービスを何年も、もしくは何十年も市場に出すことがあります。 ビジネス制約の変化やチームの変化によってプロダクトに対する良いデザインの定義も変わることがあり、長期間経つとサービスはユーザーにとって一貫性のない体験になりがちです。 デザイン指針を中心にプロダクト開発することによって長期的にものを同じ軸で評価することができ、組織やビジネス制約に依存性を減らすこともでき、一貫性の高い体験を提供することができます。

共通言語化で効率化

デザイン指針を明確に定義することで、組織のメンバーがプロダクトの開発や評価に関して同じ言語でコミュニケーションを行い、効率的に話を進めることができます。 開発ペースが早いウェブサービスにおいては短時間で精度の高いコミュニケーションを取り、デザイン判断を行えることがキモになると思います。

良いデザイン指針を定義するには

良いデザイン指針を定義するにはAlla Kholmatova民の「Design Systems」に戻って、話をしたいと思います。良いデザイン指針は以下の4つのパラメータで測ることができるそうです。
1. 本質的:実際の具体的な施策で説明をすることができること
2. 反意語が成り立つ:別の会社がそれの反意語でデザイン指針を定義することができること
3. 行動に起こせる:プロダクトの評価軸になること
4. 記憶に残る:シンプルで覚えやすい、いつでも思い出せること

またデザインプロセスをご存知の方はイテレーションを回す重要性がわかると思います。デザイン指針も同じように定義したもをでプロダクトを作ってデザイン指針のFine-tuningをする必要があります。これによってデザイン指針が会社のミッションや顧客価値からズレていないかを確認することができ、より洗練されたデザイン指針・プロダクト・ユーザー体験を作ることができます。

良いデザイン指針を定義するためのTIPSをいくつかあげます!
・会社のミッションから始める
・横断的なテーマを見つけ出す
・誰に向けてのデザイン指針なのかを明確にする
・仮説検証をおこなう  

サマリー

今回はデザイン指針について書かせていただきました。デザイン指針とは何か、それがあることによって会社へのメリットはあるのか、に加えて良いデザイン指針を作るためのTipsをいくつかあげてみました。

この二つのカンファレンスに参加することによって、確かにデザイン指針があることによって長期的により良い・洗練されたUXを設計することができると感じました。ラクスルでは現在以下のようデザイン指針を定義しています。私たちもデザイン指針の運用が初期段階にいるので、これからイテレーションを回して、改善する必要を感じています。
・シンプル:ユーザーがタスクを実行するうえで不要な機能やビジュアルエレメントが含まれていないか?
・明瞭:ユーザーがタスクを実行するうえで重要なアクション項目はひとつに絞られているか?
・一貫性:同じ機能で異なるビジュアルや性能をユーザーに提供し、混乱を招いていないか?
・速い:ユーザーは最短のスピードで必要な情報にアクセスできているか?

ラクスルでは、このデザイン指針を決めるためのワークショップをデザイナーやプロダクトマネージャーを交えて行う予定です!

私たちはユーザーにより良い体験を提供していくことに努めています!
良い体験づくりで世界をもっとよくしてきませんか?
ラクスルでは様々な職種の方々を募集しています。ラクスルの採用ベージへ
ラクスルについてもっと知りたい場合はこちらをご覧ください。

ペアデザイン

ラクスルでデザインを担当している中村です。

ラクスルに入社してはや半年が経ちました。
ラクスルでは、ここ最近は主にUCD(ユーザー中心設計)などを取り入れたUX活動やUI設計・プロトタイピングなどをしています。

さて、今日は先日実践した「ペアデザイン」についてお話ししたいと思います。

続きを読む