「DLsite comipo」は国内最大級の二次元総合ダウンロード販売サイトを運営するDLsiteが4月からスタートした新サービスです。 Eisys Design noteではDLsite comipoのリリースに向けたデザイン周りについてご紹介していきます。 新サービス「DLsite comipo」リリースに向けたデザインのあれこれ vol.01 ロゴ制作のプロセス vol.02 UIデザインのBEFORE/AFTER 編 vol.03 検索結果ページのUI　BEFORE/AFTER 編 第1回目はロゴ制作についてお話ししました！ 気になった方はどうぞ！ サービスを作っていく上でWEBサイトのデザインも必要になってきますが、一体どんな感じで作っているのでしょうか？ 今回はWEBデザイン周りについてご紹介したいと思います。 リニューアル前のデザインを見比べてみる DLsite comipo

XDでちゃんと動くスライダーを作りたい……動かない見せかけのハリボテースライダー（※）は嫌だ……ハリボテしか作れないハリボテデザイナーになりたくない……そう思ったことはありませんか？ ※こういうの こんにちは、ハリボテデザイナーのSです。今回は、XD上で操作できるスライダーを作成したいと思います。 知ってる知ってる！自動アニメーション（※）ってやつ使うんでしょ！ ※自動アニメーション プロトタイプのアクションのひとつ。トリガー（タップとか）によってアートボード間などをアニメーションで遷移させる。 操作するUIとスライド画像を作って アートボードを3つ作ってそれぞれの見た目を作り UIに自動アニメーションで遷移するようにインタラクションを仕込む！ できました！完璧！ ………でも、アートボード3つもあって邪魔だなあ ………え？仕様変更で1つめのスライドの背景色を黄色にしたい？ つまり… 全アー

「DLsite comipo」は国内最大級の二次元総合ダウンロード販売サイトを運営するDLsiteが4月からスタートした新サービスです。 noteではサービス開始に向けてデザイン側でどのような制作を行ってきたのかを第3回に分けて紹介してきました。 第1回目はDLsite comipoができるまでのロゴの制作プロセスについて 今回はDLsite comipoリリースに向けたデザインの紹介は第3回目(最終)ということで、ECサイトの要である商品陳列部分のUIについて詳しく解説していきたいと思います！ ユーザーはどこを重視して探すか？ コンテンツを探すときの表示方法は大体1列表示とタイル表示に分けられます。 説明が多く入れられる1列表示は主に「内容を重視」して探すユーザーに求められ（例：書籍(小説)のECサイト、求人サイトなど） 商品の画像がわかりやすいタイル表示では「見た目を重視」して探すユー

こんにちは！ 突然ですが皆さんWebでも文字詰めができるって知ってましたか？ WEBでの文字詰め方法を聞かれた時、 「一文字ずつ<span></span>で囲む…とかですかね…？」 と自信なさげな上に情弱さを披露してしまったデザイナーの山下と申します🙈 一般的に昔から知られている方法としてはletter-spacingやspanで文字詰めをする方法がありますが、他にもfont-kerningやfont-feature-settingsといったカーニング用のCSSプロパティが存在しています！ 特にfont-feature-settingsというプロパティではカーニング用に設定できる方法が何通りもあってめちゃくちゃすごいんです。 こういう方法もあるよー！と、デザインチームの有識者のメンバーに何通りか方法を教えてもらったので、今回はWEBサイトを読みやすくするカーニング方法を紹介していきたいと

緊急事態宣言毎にスニーカーを一足購入するようにしている、デザイナーK改め…デザイナー眼鏡です👓 おかげさまでデザインチーム内からnoteを執筆するデザイナーが増えてきたのですが…「イニシャルバッティング問題」が発生したため、今後は各自HNを名乗るようにしました。 是非弊社にご縁があった場合は私の特徴的な眼鏡をご確認してください/// さて！現在私はデザインチーム採用に携わっているのですが、本当に素晴らしい応募を多数いただき、書類選考をしながら刺激をうける今日この頃です。 しかし！素晴らしいポートフォリオながら泣く泣く選考対象外にせざるを得ない場合もあります…それは何か？ 「コーディング経験が無いWEBデザイナーさん」 です。 私もエイシスに入社する前は、分業体制の会社が多かったのですが、エイシスデザイナーは基本的に「デザイン」「コーディング」を行っています。 何故WEBデザイナーがコーデ

こんにちは！デザイナーの遊木（ゆき）です。 最近はスマホゲームのイベントに夢中になり過ぎてついつい時間を忘れてしまいます（汗）。 今回は企業で働くほとんどのデザイナーが作ると言っても過言ではない「ポートフォリオ」についてお話したいと思います。 私自身も過去に数回ポートフォリオを作る機会がありましたが、さまざまな記事や実際に採用担当をされている先輩デザイナーの意見を経て、「これは絶対に意識したほうがいいな」と思う点をお伝えできればと思います。 1. そもそもポートフォリオって何？ポートフォリオ作成にありがちなのが、「私はこれだけの作品を作りました！見てください！」というような、単なる作品集になってしまっているケースです。 一見良いように思えるのですが、選考の際に見るポートフォリオは「見せる相手に合わせて見せる内容を工夫する」ことが大切です。 これは極端な例ですが、応募する企業はWEBサイト制

こんにちは、デザイナーのサバ缶です。 最近デザインチームに新しい方が二人入社しました！趣味の合う方もいて今後お話するのがとても楽しみです🎉 エイシスでは同人活動に関わる様々なサービスを展開する「トリオキニ」を運営しています。 そのトリオキニから派生した「トリオラボ」というメディアサイトに、会話っぽいコンテンツを追加した際のプロセスをご紹介したいと思います。 トリオラボとは、「同人界の「はてな」をさぐって、その「答え」を皆様にお届けしていきます。」というのがコンセプトの、同人界にまつわる様々な情報をお伝えするメディアサイトです。 同人活動に興味のある方、ぜひのぞいてみてください！きっと有益な情報がありますよ！ トリオラボについては過去の記事で詳しくお話していますので、よかったらチェックしてみてください！ デザインについて今回追加した会話風デザインがこちらになります。 ブログサイトなどでよく

こんにちは、デザイナーのサバ缶です。 エイシスでは同人活動に関連する様々なサービスを展開する「トリオキニ」を運営しています。 これまでこの「トリオキニ」に関するサービスの記事をいくつか公開してきましたが、今回はそもそもトリオキニって何？という点について紹介したいと思います。 👇今までに公開した「トリオキニ」に関するサービスの記事はこちら👇 興味がありましたら是非見てみてください！ トリオキニとは？同人活動を行う人を支援するポータルサービスです。 👇こちらのサイトをポータルサイトとして、各サービスに行くことができます。

こんにちは！ デザインチームの山下です。 今回はDLsiteのハンバーガーメニューのUIのデザインを変更した件について紹介していきたいと思います。 ハンバーガーメニューってなんぞや？まずハンバーガーメニューって何のこと？ってところですが、ここを開いた時のメニューのことです。ハンバーガーの種類やドリンクとかが載っているメニューのことではないです。 大体どのサイトでも見かけますよね。 横線3つがバーガーっぽいことから、ここのボタンを押すと出てくるメニューのことをハンバーガーメニューと呼ばれています。 DLsiteのハンバーガーメニューは？リニューアル前はこんな感じでした。 ………長！！！！！！！！ 項目の在りどころも、新規ユーザーにはわかりにくい箇所や、情報がまとまっていないところがあります。 浮かび上がる数々の疑問点…………… なぜこうなってしまったのか？「買った作品はどこから見えるか？」が

viviONデザインチームはプロトタイプツールをXD→Figmaに移管しました。今年が本厄の眼鏡です！会社のすぐ近所に「ラブライブ」で有名な「神田明神」がありますので休憩時間に厄払い行ってまいりました…今年もよろしくお願いいたします！ さて！UI/UXデザイナーなら大半の方がインストールされていると思われる「Adobe XD」、昔はデザイン確認をするためのアップローダー代わりになっていたソフトですが、Adobeの絶え間ぬアップデートで、今では単体アプリでWEBページを組める程使い勝手がよくなりました。 そんなXDはデザインチームでも触れないメンバーはいないくらい浸透してきましたが… 「2021年内をもちましてFigmaに移管することが決定しました。」 これだけ前振りしといて一体なぜ…？ XDは日本語対応ソフトだし… Adobeアプリとの連携は便利だし… 私XDしか触った事ないんだけど！？

viviONのデザインチームでは定期的に勉強会や共有会など様々な取り組みを行っています。 社内勉強会でUIデザインの基礎を学ぶ今回もまた社内勉強会を開催しました！デザインチームだけではなく他部署の方や他のチームの方も参加いただいて、合計15〜20名ほどになりました。 今回の内容はソシオメディアさんのヒューマンインターフェースガイドラインの資料を参考にUIデザインの基礎について学びます。 勉強会は前半に座学を行い、後半は実技という内容で、1時間ずつ全8回に分けて行うことになりました。 座学や実技の内容はあらかじめデザインチームの方で担当を決めて予習をしてから参加者に教えていく形で行います！ 勉強会を通じて、直感的でわかりやすく、一貫性のあるデザインルールを習得し、ユーザーの体験をよりよくしていこうと思います！ 前半：座学(20分)全100項目あるので、この記事では3項目のみご紹介します。（1

こんにちは、機界戦隊ゼンカイジャーが最終回を迎えてしまいロスが半端ないデザイナーのサバ缶です😭 今回はDLsiteの画期的新サービスである「みんなで翻訳」についての記事です！ 「みんなで翻訳」って？ クリエイターの許諾を得たマンガ作品について誰でも翻訳をおこなえるサービスです。 サービスに登録した翻訳者がWEB上でマンガの翻訳を行い、完成された翻訳作品を「DLsite」が販売し、その収益をマンガのクリエイターと翻訳者の双方に分配するという、まさにマンガのクリエイターと翻訳者にとってwin-winのサービスです！ サービスの概要をサクッと確認できますので、ぜひこちらの動画をご覧ください！ サービス開始後の効果は？2021年11月にサービスを開始して以来、非常に多くの方々にご利用いただいております。 数値の一部を少しだけ公開します！ ・公開作品：1229！！ ・翻訳者登録数：1860！！ ・

こんにちは！ようやくPS5の抽選に当選しましたが「エルデンリ○グ」はプレイせず、大量の積みゲーしていたPS4タイトルを貪っている眼鏡です。 今回はデザインチームにUXリサーチチームが発足してから二回目のユーザーテストを行い、問題点の改修を行った話になります！ ECサイトに携わっているデザイナーなら有意義な内容になるかと存じます！※もちろん無料記事です。 📝まずはユーザーテストについてユーザーテストとは、製品やサービスなどの利用文脈やユーザー体験について調査し明らかにすることです。ユーザーテストの「概要」や「第一回のテスト結果～改修」について記事にしておりますので、こちらからご確認ください。 💁今回のテーマは作品（商品）詳細ページですテストを行う背景は弊社サービスのDLsiteのユーザーインタビューで 「クーポンの利用条件の説明が不足している」が浮き彫りになったためです。 ※問題となった

こんにちは。ちいかわ大好きデザイナーのせっきーです。 先日公開されたこちらのキャンペーンページでは、Live2Dのソフトウェア開発キット「Cubism SDK for Web」を使ってLive2Dモデルを表示しています。 マウス追従で視線誘導や身体の揺れなどが確認できる本記事ではそのCubism SDK for Webを使ってWeb上で動かせるLive2Dモデルを表示する手順をご紹介します。 ○前準備・Live2Dモデルの組み込み用データを用意する Live2D Editorの「組込み用ファイル書き出し」で書き出されたデータ一式を使用します。 ・Cubism SDK for Webをダウンロードする 今回は公式が用意しているサンプルデモSamples\TypeScript\Demoを流用して作成します。 ・開発環境構築 Node.jsとVisual Studio Codeなどのエディタをイ

こんにちは！最近寒過ぎて布団から出られなくて奮闘している遊木（ゆき）です。今回はviviON社内で行っている1on1についてお伝えしたいと思います。 1on1とは1on1 とは、上司と部下で定期的に行う面談のことを指します。近年ではYahoo !やソフトバンク・テクノロジーなど大手企業が導入していることでも有名になりました。viviONでは三年ほど前から導入しています。 1on1の目的簡潔に述べると、1on1の目的は「上司と部下の信頼性を築き、個人のパフォーマンスを向上させること」です。 特にリモートワークが普及している今、チームメンバーや上司とコミュニケーションを取る機会が減ったという方は多いと思います。 そのような中で上司は「チームメンバーがどのような課題を抱えているのか」「仕事をする中で不安に感じていることやモヤモヤしていることはないか」などが普段の業務の中では把握しづらくなっていま

はじめまして！デザイナーの古賀と申します。昨年末からZOWAというASMR動画アプリのデザイン担当をやっています。 今回の記事ではZOWAチームで継続的に行っているアプリ改善の、リアルな進め方をお伝えできればと思います！その一例として、プレイリスト機能のUIを改修した際についてご紹介します。 ZOWAってどんなアプリ？ZOWAとはASMRコンテンツに特化した動画視聴アプリです。メジャージャンルに留まらない様々なASMRを、広告無しで楽しめます。ユーザーさんはお気に入りのASMRでプレイリストを作るなどして楽しんでくださっています。 今回の改修内容 元々ZOWAにはプレイリスト機能があるのですが、 ・自分で作成したプレイリストが削除できないので管理がし辛い。 ・作成したプレイリストは他のユーザーさんも見れるので、恥ずかしいものは作れない。 といった課題があり、「①プレイリスト削除機能」「②非