デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
ベイジのウェブ制作ワークフロー2021年版（約100のタスクと解説） | knowledge / baigie
営業、受注、制作、納品、運用と、ウェブ制作の活動は長期に渡り、そのタスクの種類と量は膨大です。だからこそ、基本的なプロセスや使用するドキュメントなどを明確に定義しておかないと、サービスの品質が担当者により大きく変わることになります。 ベイジは社員がまだ5名の頃、各人に委ねた進め方によって以下のようなトラブルが頻発していました。 ミスが発生しても「次から気をつける」と精神論で終わらせてしまう 担当するディレクターやクリエイターによってタスクの抜け漏れが起きる 担当者それぞれが属人的な進め方をしてて品質が安定しない 役割が不明瞭なグレーゾーンのタスクが放置されてしまう 創造的な仕事の時間が、ルーチンや計画にないタスクに奪われてしまう 新しい社員が入る度に同じことを教えないといけない これら問題を解決するため、2014年頃からワークフローを整備するようになりました。ちなみに私が入社したのはこれ以
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
Webサイトのコンテンツ制作コストを計算する方法
Robは、コンテンツコラボレーションプラットフォームであるGatherContentのコンテンツ戦略担当です。 彼はコンテンツ戦略を開発、実装、測定、改良し、GatherContentブログの編集長となっています。 コンテンツの作成は、Webサイトプロジェクトの一部に過ぎず、作成のためには、計画やワークフローの決定、適切な人材の獲得、時間、お金が必要であり、さらに異なるチームステークホルダーや分野の専門家との協力が求められます。さらに、ビジネス目標とユーザーのニーズを満たすコンテンツの必要性を加味すると、要件はさらに複雑になります。コンテンツ制作がWebサイトのプロジェクトを邪魔することがよくあるのも頷けるものです。 プロジェクトのコンテンツ制作のために、必要な時間やお金、人材に対して十分な計画を立てなければ、次のような問題が発生します。 コンテンツが予定どおりに提供されない、またはまった
エル版・Web制作の業務チャート｜Webディレクター・ハラヒロシのブログ
ふだん自分たちがやっているWeb制作業務を体系的にまとめるとどんな感じかな？と思ってXmindでサックリつくったチャートがこれ。深く考えていないのでツリー構造がおかしいところ、過不足等あると思いますがお許しを。いやー...やることいっぱいあるなぁ...。 これをつくってみた目的はふたつ。 【1】新人デザイナー向けに、どの業務からやってもらうかをマークする ・徐々に周辺業務に広げていくことで経験値が実感できる ・目標を立てやすい ・全体のなかの位置づけを理解し、俯瞰する力がつく 【2】中堅デザイナー向けに、棚卸をしてもらう機会に ・得意なこと、苦手なこと、やってみたいこと...自分を客観的に見つめなおしてもらう ・スキルアップまたはスキルチェンジの足掛かりに ・案件をどこまでカバーしていくかのチェック材料に使える マンガ「Webクリエイター・ウルトラエル」 ITが発展した下界に下りてきた忍者
UXデザインプロセスがプロジェクトに応じて柔軟であるべき理由
Codal社のクリエイティブ・ストラテジスト。 マーケティングおよび戦略の企画・実行、ニュースレターの企画と構成などを手掛ける。 UX業界に身を置く人なら誰もがそれぞれの「UXデザインプロセス」を持っており、その手法はさまざまです。似たようなフローやプロセスであることが多いものの、考え方は大きく異なります。 UXデザインプロセスでは、１つの手法がすべてに当てはまることはありません。デザイナーやUXを担当する人であれば、「UXデザインプロセスとは何ですか？」と何度も問いかけられたことでしょう。より抽象的なレベルでの概論を展開することも可能ですが、プロジェクトの詳細を理解するまでは、プロセスを定義するべきではないでしょう。 UXデザインプロセスの重要性 最終的な製品の品質が、わかりやすく簡潔なUXプロセスによって決まることもあります。つまり、プロセスによって製品の良し悪しが決まってしまうという
My process of creating the Arriva web site | Veerle's blog 3.0
Just a while ago I wrote about a cool project I finished for a small start up company called Arriva. I shared the logo design process back then. Today I’ll talk about the design of the web site and I’ll share how I get started with my coding, how I prepare the different assets, which tools I use, and how I organise my files, my CSS (or better put SCSS) in particular. Short introduction Arriva is a
The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch
Walk with meBrad Frost, the stunning human being in the video above, is largely responsible for the system this article is about. Atomic Design was developed in response to the responsive, digital world we live in. We’ve been making style guides, elemental guidelines, mood boards and many other tools to help make our designs easier to understand for years now. Similarly, developers have been using
フロントエンドのテクニカルディレクションに求められるスキル
フロントエンドのテクニカルディレクションに求められるスキル フロントエンドの多様化が進む中で昨今重要視されているのが「テクニカルディレクション」のスキルセットです。 会社の規模や職域、ビジネスモデルにより求められるスキルセットは異なりますが、中小のWeb制作会社を前提に話をいたします。 ディレクター/フロントエンドエンジニアの作業分担 ケースとしては以下のようなパターンが考えられます。 アサインされたディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う アサインされたフロントエンドエンジニアがテクニカルディレクションとフロントエンド実装を行う アサインされたSE/テクニカルディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う。 個人的には2のケースでアサインされることが一番多いですが、最近の案件では3のケースで1年ほどテクニカルデ
リセットして考えるデザインプロセスが必要な理由
CSS Nite と同様に、年末恒例になっているのが WCAN Winter。例年、ビジュアルデザインやコードの書き方など、「作り方・見せ方」をテーマにしたセッションが必ずひとつありましたが、今年は 3 つあるメインセッションがすべて「コンテンツ」をテーマにしていました。200名以上集まる Web サイト制作系のイベントで、全編「コンテンツ」をテーマにして話せたのは、大きな意味があったと思います。 昨年は「スマホサイトが嫌われる理由と改善方法」と題して、スマホサイトで足りないのはデザインではなく、コンテンツであるという話をしました。当時は、作る前にしっかりサイトの『健康診断』をして、コンテンツをゼロから見直しましょうという内容でした。今回は「なんとなく」を共有する、コンテンツを活かしたデザインプロセスと題して、コンテンツ制作やデザインを進めていく上で、理解・共有しやすくなるように工夫しまし
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
GitLab flowから学ぶワークフローの実践 | POSTD
Gitによるバージョン管理では、従来のSVNなどよりずっと簡単にブランチングやマージができます。さまざまなブランチ戦略やワークフローが可能であり、以前のシステムに比べるとほとんど全てが改善されたと言えるでしょう。しかしGitを利用する多くの組織はワークフローの問題に直面します。明確な定義がなく複雑で、Issue Tracking Systemと統合されていないからです。そこで、明確に定義された最良の実践的方法としてのGitLab flowを提案したいと思います。issue trackingには feature driven development と feature branches を組み合わせます。 他のバージョン管理システムからGitに移行する際によく耳にすることは、効果的なワークフローの開発が難しいということです。この記事ではGitワークフローとIssue Tracking Sys
デザインを決めて進めるために必要なこと
先月は東京、そして今月は大阪 で、クリーク・アンド・リバー社が主催する Web ディレクター向けのセミナーで登壇しました。私自身、Web ディレクターと名乗っていないので、依頼を受けたときは半信半疑でした。しかし、Web ディレクターをはじめとした「作り出す人」にある共通の話題があると考え、登壇を決めました。 点をどのように線にするか ツールの使い方。マークアップの仕方。コードの管理方法。ペルソナの作り方。コンセプトを固めるためのワークショップの仕方 … などなど。こうした行程の中にある『点（作業）』は、書籍や Web でたくさん見つけることができます。どれも重要ですが、行程全体からみたとき、その手法がどのような意味を持っていて、それを基にどうゴールに向かって走れば良いのか見えないことがあります。 点は理解できたけど、それをどう線にしたら良いか分からないわけです。 例えば社内ワークショップ
ソシオメディア | UXデザインプロセスについての考え方
UXデザインのプロセスは、UCD と呼ばれるユーザー中心設計の考え方をベースとしています。ユーザー中心設計の考え方とは、プロジェクトの各工程でユーザーを取り入れるというものです。主に、ユーザー調査の結果を要求分析に取り入れること、設計段階ではプロトタイプ制作とそのユーザー評価を行うこと、そして運用の中で継続的にユーザーからのフィードバックを収集することが重要とされ、製品／サービスのライフサイクルを通じてこれを繰り返します。つまりUXを向上させるためには、Try（試しにやってみる）と Catch（状況を把握して分析する）のセットを反復的に行うことが大切です。 これは別の言い方をすると、デザインには決まった答がなく、常に試行錯誤が必要だということです。反復的デザインは、各フェーズ単位、プロジェクト単位、そしてより大きな事業やブランドといった単位で多層的に試みることが求められています。 ウォータ
プレビュー至上主義 - cmu12
「プレビュー至上主義」 プログラマが「テストファースト」を唱えるなら、デザイナが主張すべきは何? それが「プレビュー至上主義」。書くより先に見る、書きながら見る、しかもほぼ最終成果物に近い形で。 河村 奨 (かわむらつとむ) これはCreators MeetUpで話したスライドです。ライブプレビューしながら、jade + Gruntで作っています。興味あるかたはこちらのGitHubも合わせてどうぞ。 iPhoneや大きめの画面でも見られるよう調整しました。(2014/1/19) 好きなことはなしていいらしい。なにはなそう? レスポンシブ、インブラウザデザイン、脱Photoshopの波など、ここ数年、色々ありました。それをふまえて... ライブプレビュー 少なくとも、ライブリロード ロジックレステンプレート (たぶん時間ないので、よかったら後で〜) GUIツール不在のWEBデザイン業界 今年
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
Automating Front-end Workflow
Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this? This talk introduces you to a new workflow of tools to keep you productive on the front-end. Learn about: - Yeoma
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Content in the design process — articulating our role
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
