DIST.18 「Sketch時代のWebデザインワークフロー」
2017年11月10日 著 ヤスヒサさんやこもりさん、それに先だって6月に参加したイベント「UIデザイナーとエンジニアのためのSketch入門＆実践」でもお話を伺った吉竹氏が講演されるというので、DIST.18 「Sketch時代のWebデザインワークフロー」に参加しました。会場の東京テクニカルカレッジは会社から歩いて行ける距離だったので、Google Mapsに導かれクネクネとした裏道を通り、東中野まで移動。懇親会には参加しなかったけれど、ワンドリンク付きで参加費1,000円というのは、面子を考えるとかなり良心的。 御三方の講演は抽象度が少し高めの、それほどSketchに特化していない内容から始まって、徐々にSketchに特化した話へと深化していく......という構成。まぁ、イベントのタイトルからしてメインテーマはワークフローであり、Sketch「時代」とあるように、Sketchは単に
働き方のプロトタイピング
2016年7月24日に開催されたイベント「Adobe Design Jimoto Vol.2 in 渋谷」のトークセッションで使用したスライドです。
時間がない中でも手戻りなくイケてる特設サイトを作る方法｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは。今年は梅雨なのに雨が少なく、猛暑日が続くと思ったら急に寒かったりと、体調管理が難しい天気ですが、ごきげんいかがでしょう。 今回は、主にデザイナー歴3年までの新人デザイナーさん向けに、「時間がない中でも手戻りなくイケてる特設サイトを作る方法」について書いてみます。
UI Crunch #8 参加レポート
コーポレートサイトのWebマスター、ECサイトの店長、ECパッケージベンダーのディレクターなどを経て、現職へ。IAに基づくWebエンジニアリングを追求する毎日を送っています。海外ドラマ鑑賞、NBA観戦、ゲーム好き。 DeNAさんとGoodpatchさんが共催するセミナー「UI Crunch#8」に参加してきました。 毎回応募者が殺到し、倍率が何倍にもなる人気セミナーですが、今回もご多分に漏れず、120人枠に733人もの申し込みがあり、当選確率が6倍にもなっていました。 今回私はUX MILKの突撃レポーターとして参加させてもらうことができましたので、メディア席の最前列よりイベントの様子をレポートさせていただきたいと思います。 プレゼンテーション 株式会社サイバーエージェント｜佐藤洋介さん テクニカルクリエイターが担う、サービス開発のUIモックの現場 〜サイバーエージェント流〜 サイバーエー
Bootstrap実践編 Sass,CSSを追加してオリジナルデザインにする（４） - マンガでなれる？WEBデザイナー講座
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyph
Bootstrap実践編 デザインソフトでデザインを作り込む（３） - マンガでなれる？WEBデザイナー講座
前回からの続きで「Bootstrap実践編 デザインソフトでデザインを作り込む（３）」の説明を始めます。 前回のタイポグラフィ、サイトカラー見本にロゴを作成して追加しました。 通常、Webデザインはロゴマークのイメージに合わせて作成します。 今回は無料ベクター素材のサイトなのでロゴマークはペンのイラストを描きました。 ロゴのフォントはペンツールで書いたイメージです。 ロゴデザインとWeb制作の同時発注は稀なので Web制作を依頼された場合はデザインカンプを制作する前に クライアントにはロゴの手配をしてもらいます。 サイトによってはファビコン画像が必要な場合もあります。 2. Webデザインを作り込む アートボードを作成した後はBootstrapの12カラムに合わせてグリットを用意します。 1からグリットを作成するのは面倒なのでBootstrapのテンプレートを使います。 http://bo
Bootstrap実践編 スケルトンサイトから制作するWeb制作短縮方法（１） - マンガでなれる？WEBデザイナー講座
えっ！？HTMLだけでできるんですか。 私はインブラウザでコーディングするとデザインイメージ湧かないから苦手なんですよ〜。 逆に遅くなっちゃいますよ。 クライアントだっていろいろ修正変更とか言ってきそうじゃないですか。 デザインとコーディングを同時に修正するなんて大変すぎます。 クライアントと案件内容にもよりますがスケルトンサイト（ワイヤーHTML）から見せながら制作した方がデザインが通りやすく納得されやすい事が多かったです。 初期の段階でサイトの骨格がすでに決まっているのでコーディング時間を大幅に短縮する事も可能です。 デザイナーはデザイン作業に集中できます。 （※全ての案件に対応できるわけではないので案件によってはワークフローを変更する必要もあります） 今回紹介するワークフロー （１）スケルトン（骨格）サイト制作 Bootstrap3のジェネレーターを使って作成する （２）デザイン作業
Bootstrap実践編 基本的な書式、タイポグラフィー、サイトカラーを作成する（２） - マンガでなれる？WEBデザイナー講座
どういった内容のサイトか、雰囲気やイメージを膨らませながら サイトカラーや使用するフォントを決めます。 私はIllustrator、Photoshopなどでカラーを作成する時はAdobe Colorで色見本を作成します。 今回はSketchでカラーを作成するのでMaterial Design Color Paletteというプラグインを入れてカラーを作成してみます。 Material Design Colorというサイトから色をコピーすることも可能です。 マテリアルデザインのカラーなので最近のWebデザインの流行に合わせたカラーが作成できます。 色の明度によってもサイトの印象も違ってきますので こういったツールを使用すると制作するサイトのカラーを容易に検討することができます。 今回制作するサイトはベクター素材を配布するフリー素材サイトなので デザイン性のある明るい配色にしたいと思いました。
ADC OnAir シーズン 2 第 1 回のこぼれ話 - akihiro kamijo
２ 月 ２０ 日に放送が開始された ADC OnAir シーズン 2 の第 1 回のテーマは、レスポンシブデザインのワークフローと、 Edge Reflow でした。企画中に検討されたものの、時間の都合上、番組内には収められなかった話題をいくつかご紹介します。 まだ、見てないという人はこちらからご覧になれます。 （シーズン2 第1回『レスポンシブデザインのワークフロー徹底討論！』） レスポンシブデザインの Web サイト制作ワークフロー 何を繰り返すのか？という話 上は、最初に小川さんからいただいた資料のワークフローです。プロトタイプのフェーズでは、Bootstrap 等のフレームワークを用いて開発する、するとコードをそのまま実装フェーズで利用できるというのがポイントの 1 つです。 プロトタイプは実際のコードを使って開発するので、デザインの確認をするにもコードを書くことになります。それだ
レスポンシブWebデザイン ワークフロー
組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼうAkiko Kurono
組み立てるだけのサイト制作プロセスを変えるヒント
書籍や雑誌をはじめとした印刷物。TVやラジオで見られるような広告。デスクトップで動作するソフトウェア。これらの制作プロセスは Web サイト制作において影響を与えてきてモデル。テクノロジーやノウハウが蓄積され独自性も多少出て来たものの、Webサイト制作プロセスは基本的なところは10年くらい変わらないのではないでしょうか。 配布してしまったら終わりの印刷物。一瞬でもインパクトがあればそれで良いテレビCM。企画といっても仕様や機能を決める話になり、始めたら後に戻りにくいウォーターフォール式のソフトウェア開発。いずれのプロセスも長所はありますし、それぞれの形に合っているから使われているわけですが、人と人、情報と情報、そして人と情報が常に双方向に繋がり続けている Web という有機体にはいずれの方法も適していません。 流動的に変化を続ける Web だからこそ、アジャイルソフトウェア開発が受け入れら
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
Information Architecture Tutorial | blog / bookslope
ヤスヒサさんから教えてもらった「Webmonkey」――この名前を聞いて「懐かしい」と思う人も多いはず。実は、先月5月末に復活していたみたいで、いろいろとブログにも取り上げられていました。 そのうち、「tutorials > User Experience Design」の中にある「Information Architecture Tutorial」について見てみました。Squishy (John Shiple氏) がいくつかのステップに分けているようです。 サイトのゴールターゲットの目的 (ニーズなど)クリエイティブ (スケルトン・メタファ・ナビゲーションなど) これをレッスンごとに分けていて、それぞれに概要が書かれてあります。参考資料の名称まで書かれているので、日本語にしていくと、なんとなく自分たちが資料化しているタイトルと被ってくると思いますが、どうですか? ■Information
こんな成果物は嫌だ。 コーディングディレクション編 - Vox
コーディングに入るときに、こんな成果物は嫌だ！ ということでコーディングディレクションにおける成果物を洗い出そうという試み。 成果物といっても修正指示まで入れると、いただくドキュメントすべてという感じですね。 注意点１．念のため、一応書いておきますが、特定の誰か・何かを非難するものでは全くありません。 心当たりがあったからといって、うちが恨んでいるという話では全くないのですが、 勘違いされる方がいらっしゃったら先に謝ります。すみません。 注意点２．これ、制作会社の方から発注があることを前提に書いています。Web制作でエンドユーザーからだったら、こんなに虫の良いこといいません。これをそろえるのがディレクター（うちがやることもありますが）の仕事だ、というつもりで書いています。 注意点３．嫌みっぽく見えたらごめんなさい。文章のノリの都合上の問題です。 注意点４．ディレクターって大変ですよね。まじ
Web 制作会社ワークフローあれこれ12選 - カタコト日記
Web サイトをどうつくっていくのか。 ワークフローの最適化って難しいし、会社の個性が強く現れるところだと思うんだよね。 今日は深入りはしないで、見せ方の気に入ったワークフローを並べてみることにしました。 コンサルティング中心の会社も入ってますが。 キノトロープ 初期コンタクト 成功予測 戦略策定 戦術策定 制作・公開 更新・運用 効果測定 全体的に若い会社の多いこの業界の中では老舗（1993年創立）。 かっちりしていてある意味でお手本的。ワークフローの本も出してるしね、確か。 イージェーワークス 戦略 構築 運用 ISP系の会社だそうです。図がみやすい！プロモーションの設計〜実行を "明示的に"（他社も当然やってはいるけど）フローに入れてるところが特徴かな。 ビービット サイト戦略策定 サイト設計 デザイン / 制作 効果検証 ユーザビリティに強いことで有名な会社。ちなみに上の図は1.戦
地味なディレクターの地味な仕事術 第一回「更新ファイルの把握」 : LINE Corporation ディレクターブログ
こんにちは。菊地です。 自分で言うのもアレですが、私は地味です。生活も地味なら服装も地味なので、仕事っぷりも地味だったりします。 当然クール（イケてる的な意味で）なライフハックとか、シティボーイ（都会的な意味で）なガジェットとか、ナウ（now＝今っぽい的な意味で）なネタは、あまりご用意できません。 そこで、今回は「地味」ならではの視点で、できる仕事術を考えていきたいと思います。 「俺って会社じゃ目立たねぇよなぁ…やる事はやるんだけどなぁ…」とか、「ミスはしないぞ!! しないだけだけど…」とか、「地味だけど堅実な仕事ぶりを評価されたい…」といった、そんな引っ込み思案さんに向けて、「ボクも地味でしょ？ えへへ、よかったらマネしてね」的なメッセージを込めて書きます。 更新ファイルの把握術（対象：地味で繊細な人） 日々、膨大なファイルがアップデートされる制作の現場では、しばしばプロジェクトの変遷や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
History_of_waterfall_append
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
CSS Nite公式ブログ:9月18日にCSS Nite in Ginza, Vol.26を開催