みなさん、Adobe XDを使っていますか？ エイシスのデザインチームではWebデザインのプロトタイプを作る際によくAdobe XDを使用しています。 「プロトタイプ」モードで、作ったデザインにアクションやインタラクションを設定すれば、画面遷移などのシミュレーションが簡単にできます。便利ですよね。 例えばこういうメニューを作成して それぞれにインタラクションを設定して… 別のぺージのメニューも設定して… さらに別のページの… ……めんどくさい！！ ということにならないための機能「コンポーネント」のご紹介をしたいと思います。 コンポーネントとはボタンなど、UIのデザインのひな形のことです。1タッチで呼び出せて使いまわすことができます。 オブジェクトを選択して右クリック、「コンポーネントにする」を選択すると 選択したオブジェクトがコンポーネント化されます。コンポーネント欄に追加されたコンポーネ

「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

「出社とテレワークの二軸を実現！」こんばんはデザイナーK（ドクターKみたいですね…あ！歳がバレ…）です。 今後は記事に「生感」を持たせるためにイニシャルを名乗って行こうと思います！多分デザインチームに二人もKさんは居ないはず…はず…。 エイシスのデザインチームは、 2021年6月の時点では「20名」在籍しております。 しかし現在オフィスに出社しているメンバーは「約6名」（通称”出社組”）、他メンバーは全てコロナの影響でフルリモートで業務対応をしております（通称"フルリモ組"）。 「出社組」も週3以上出社すれば、それ以外の日はテレワークも選択できるようになっています。 また「緊急事態宣言」期間は週5リモートで柔軟な対応をとっております。 （メリハリが効くので個人的にはとてもありがたいです///） 「具体的に何が変わったのか？」 ズバリ、コロナ禍になり会議の在り方がかなり変わりました。 「オン

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サイトを読みやすくするカーニング方法を紹介していきたいと

こんにちは、最近なぜか冷凍庫に牛タンがあふれているデザイナーのS改めせっきーです。 会社に属していると 「会社はどこを目指しているのか」 「チームで目標は設定されているけど、それに向けて自分は何を頑張るべきなのか」 「自分はどのぐらい目標を達成できているのか」 などで悩んでしまう時があると思います。ない方はブラウザバック！ｼｯｼｯ エイシスではそんな問題を解決するためにOKRを導入しています。 OKRとは目標と成果指標の管理手法のひとつOKRとはObjectives and Key Resultsの略で直訳すると「目標と主な結果」になります。…主な結果…なにそれ…？（※） ※主な結果＝成果指標＝目標達成のための目印のようなもの 通常の目標設定とOKRの大きな違いは「目標と主な結果」の言葉にもある通り、主な結果＝成果指標＝目標達成のための目印のようなものも評価、管理できる点です。 Googl

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

こんにちは、デザインチームのSSです。 当社にUXリサーチチームが発足してから初めてユーザーテストを行い、決済ページの改修を行った話をします。 ユーザーテスト実施 遡ること1年くらい前、当社にUXリサーチチームが誕生しました。 マーケティング・ディレクション・デザインチームから各2～3名で構成。 右も左もわからない中、外部調査会社ご協力のもと、ユーザーテストを2回実施しました。 📝UXリサーチとは 製品やサービスなどの利用文脈やユーザー体験について調査し明らかにすることです。 ユーザーインタビュー・ユーザーテストなどの手法を使って集めたデータから分析を行い、ユーザーが持っている課題・ニーズを理解して解決策を見つけ出し、サービス改善の意思決定に活用します。1回目は、DLsiteに初めて訪問したユーザーが、サイト内をどう回遊し、購入に至るのかのユーザーテストを行いました。 その結果、いくつか

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

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

こんにちは！デザインチームの眼鏡担当です。 緊急事態宣言中にすっかり夏も終わりを迎えそうで秋服ポチポチに余念がありません。 さて！ 本記事にアクセスしたということは…少なくともユーザーテストに興味があったり、会社に導入しようか考えている方も多いのではないでしょうか？ 「導入したくなった！」「社内だけで出来るなら試してみようかな？」っと何かのきっかけになれば幸いです。 ※以前公開したユーザーテストの記事もPR 今回は表題にあるとおり 「ユーザーテストとは何ぞや？」 「なんでユーザーテストを導入したのか？」 「最初はどんなテストを行ったか？」 を記事にしたいと思います。 ユーザーテストとは何ぞや？どんなことをチェックするのかな？できるだけ砕いて説明させていただきますと 😃仮説検証のため、複数のユーザーに製品やサービスを使っていただき、操作の過程を観察することで利用実態を把握する。 ↓　からの

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

こんにちは。練習用ゴルフクラブを賃貸の壁にぶつけて敷金が消滅しかけているデザイナーこと、せっきーです。 エイシスのデザインチームは、現在（2021年11月時点）25名在籍しており、そのうち15名程度が常時テレワークで業務対応をしています。 テレワーク制度が始まり早1年強。制度導入前と変わらぬパフォーマンスを発揮しているデザイナーたちはどのような作業環境で業務を行っているのか。それを突き止めるべく、デザイナー3名に環境や機材についてインタビューをしました。 ウルトラワイドモニタが目を惹くスタイリッシュデスクしがない王国民（UI/UXデザイナー） 田村ゆかりが大好き。 しがない王国民からのコメント テーマは広々快適。広いは正義。幅160奥行き75の天板のおかげでモニタアームを2つ設置するのも余裕。デザインラフを描くときもいちいちキーボードをどかしたりする必要がないのでストレスフリー。えっ、机の

こんにちは！デザイナーの眼鏡です。 いきなりですが皆さんは「自分の所属するチーム以外に新入社員が入社した際」どういったコミュニケーションをとっていますか？ エイシスでは取り組みの一つとしてSlackで部活動を行っています。 チャットツールで部活動!?私の記憶が確かならば…3年前に社内チャットツールを「Slack」に移管してから、スタッフが好きなパブリックチャンネル（部屋）を気兼ねなく作れるようになったのがきっかけだったと思います。 ※同好会という表現が近いのかもしれません。 これにより幾つものチャンネルが産声を上げ、会社の一つのカルチャーとなりました。余談ですがフルリモート時代ではコミュニケーションが気薄になるので、様々なリモート促進の座学や書籍でもチャットによる雑談は重要視されています。 新入社員の方も、自分の好きな趣味趣向チャンネルに参加し、実業務で関わることがなくともスタッフの人とな

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

こんにちは！デザインチームの遊木です。 早いもので今年も残り1ヶ月を切りましたね…。11月、12月は推しジャンルのイベントがてんこ盛りで財布が悲鳴をあげています。。 時期的にこれから就職・転職を控えている方も多いかと思いますが、デザイン業界への就職を希望されている方の中には「UI/UXデザイナーって忙しいんじゃないの…！？」と思っている方も少なくないのではないでしょうか？（私も実際にそう思ってました） そんな疑問を抱えている方に向けて、私含むエイシスのUI/UXデザイナー2名のタイムスケジュールを紹介したいと思います。 遊木の場合 遊木（UI/UXデザイナー）　フルリモート 07:30：起床・家事・運動 ついつい夜更かしをしてしまってアラーム1回では起きられないので、スヌーズ機能をつけてやっと起床してます。 出勤までに家の掃除や洗濯などを済ませてからフィットボクシングをやるのが最近のルーテ

こんにちは！最近同姓のデザイナーが入社し呼び方についてきゃっきゃ悩んでいるデザイナーの眼鏡です。 前回の「部活編」に続きますが、皆さんは「自分の所属するチーム以外に新入社員が入社した際」どういったコミュニケーションをとっていますか？ viviONでは取り組みの一つとして「アフター６」という制度があります。 「当社にも導入してみようかな？」なんてきっかけになれば嬉しいです。 定時後の交流で1人1000円活動費を支給！ アフター６とは会社の福利厚生のひとつで、「従業員の交流を目的として、自主的な社外余暇活動に対して会社が一定額の助成を行う制度」です。 ※対象は全従業員（契約&アルバイト含）となります♪ 支給の条件としては、とてもシンプルです。 １．参加人数4人以上。 （フルリモートの方も当日朝から出社していれば問題なく参加可能！） ２．社内チャットで参加者を募る。（誰でも参加可能な状態にする）

こんにちは、最近日本酒は瓶ごと行くデザイナーのせっきーです。 デザインチームでは有志が集まって隔週に1度、2時間、デザイン勉強会を全5回開催しました。チーム内での交流、デザインスキルやファシリテート能力の向上が主な目的です。 Webデザインに関係するお題を事前に決め、当日までにこなし、勉強会当日に発表、その後最適解を導き出すという形式です。 当日は会議室に集まってみんなでプロジェクターを使って発表…といきたいところですが、いまはコロナ禍。テレワークの社員も多いので全員が集まることが難しい状況です。 そこで、私たちはこの勉強会をすべてリモート上で行うことにしました。本記事では勉強会に取り組んだ際の進め方や気づきなどをお伝えします。 事前準備お題の決定や勉強会当日のファシリテーターを務める「進行役」を2名決めます。進行役は勉強会ごとにローテーションさせます。 2名選出する理由は、勉強会参加者が