インブラウザデザインの責任分界点 -デザイナーが書くコードについて思うこと（2） | ツクロア - DESIGN LAB
ブラウザ上で直接コードを書いてWebアプリデザインを行う「デザイニング・イン・ブラウザ」もしくは「インブラウザデザイン」。もう何年も前からそのメリットについて話す人も多く今更新しい手法ではないでしょう。 SketchやPhotoshopによるデザイン納品よりも多くのデバイスや環境で確認でき、animation,hoverをはじめ、ユーザーのアクションによる画面状態変化がリアルに把握できて、デスクトップやモバイルといった固定しない画面サイズにおいて実際の操作中にユーザーの誤操作やストレスを見つけやすいというメリットがあると言われています、ただ、あくまで手段のひとつだということも忘れてはいけないですね。 個人的にはページ数の少ないシングルページアプリケーションにおけるデザインには有効な解決手段だと思っています。 ただいいコトずくめに見える手法ですが、そのコードを開発側にそのまま流用しようとする
コンテンツやデザインに欠かせない価値観を共有するプロセス
利用者中心とは言いますが 自分たちが作りたいものを作るのは身勝手な行動のように見えますが、「自分たち」という価値（アイデンティティ）が確立されているかされていないかは大きな差があります。価値がないまま、「利用者のため」という考えだけ一人歩きしてしまうと、極度な A/B テストの実践など、数字が高いほうを選択するという製品開発になる可能性があります。 利用者中心のデザインは必要です。しかし、それは土台になる【価値観＝ビジョン】があるから成り立つものであり、いきなり利用者中心のデザインプロセスを実践しても意味のないことだと考えています。スタートアップ向けの講座で ビジョンの共有が重要だと話したのもそのためです。プロジェクトを始める際は、必ずといっていいほど「我々は何者か」という部分を振り返るようにしています。 付箋には「気分が良い」「落ち着く」といった、感情的なフレーズが含まれることがあります
Front-end Tooling Workflows
~ 198 slides on tools to help you stay productive on the front-end.
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
今のデザインに必要とされるコントロール
本当にコントロールできないのか WD101シリーズの最初に、Webデザインは見た目のコントロールができないという話をしました。スクリーンの大きさが多種多様なだけでなく、利用者が見た目や操作性を自由に変えることができる Web。DTPのような感覚でサイトをデザインしても、誰かの Web アクセスの利便性を損なうと指摘しました。 デザイナーはある種、混沌とした状態から秩序を生み出す能力をもっていると思います。バラバラになった情報を整理して一貫性のあるメッセージを伝えたり、混雑した Web の世界に明確な道筋を示す仕事をしています。秩序を作り出すということは、ある程度のコントロールはなくてはならないわけです。 コントロールすることがデザイナーの仕事であるとすれば、『コントロールができない Web』との相性がよくないように見えますし、デザイナーにとって非常に仕事が難しい環境のようにみえます。しかし
将来のWebサイトにおけるデザイン制作について割りとそこそこまじめに考えてみた。 – yutarofuji
こちらの記事”How to get started with next-generation website prototyping“を読んで次世代のWeb制作とはなんだろうと考えてみた。 次世代のWebサイトプロトタイピングとは 先ほど記事で紹介している内容としては、従来型のグラフィックツールを使ってゴリゴリとデザインを作成していくようなフローではなく、よりグラフィカルなアプリケーションを使って直感的にWebサイトやアプリを制作していくという事が書かれている。この記事では主に以下6つのアプリケーションが紹介されている。 Origami MAX Vuo Briefs Framer.js RealTime Studio どのアプリもグラフィカルなUIを備えていて直感的にパーツを組み合ることができるノード形式になっていて、まるでパズルを組み上げていくかのようにWebサイトやアプリを制作すること
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
Intending for 2014: design directly in the browser | Poppecast
The year 2013 was the year that Adobe announced that Fireworks is no longer developed . Personally I found this a big disappointment . On the other hand, “changes are the spice of life.” In 2013, Stephen Hay brought namely the book “Responsive design workflow” out . Its workflow proceeds on the assumption that you are going to design directly in the browser. Inspired by the book , I therefore bega
PSD to HTML is Dead
PSD to HTML tutorials are all over the web. In fact, many people have asked me why there’s not a PSD to HTML tutorial on Treehouse. In addition to the tutorials, there are lots of companies that will accept a PSD and convert it to a webpage for roughly $100 USD. Check out all our HTML courses at Treehouse. Google returns more than 48 million results for a “psd to html” search. It’s popular, but no
デザイン作業のスピードアップ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
実際のお仕事の流れ
実際のお仕事の流れ お仕事を依頼されるにあたって実際はどういう流れになるのだろう？ こっちは何をどうすればいいのか分からないというご意見をよくいただきますので、実際の流れを一例にそって紹介させていただきます。 案件の内容によってはこの流れと異なる事がありますが、大きく外れるという事はほぼありませんので、イメージしていただきやすいかと思います。 運用サポートに関するご相談の場合と、制作をする場合で流れが違いますので、2パターンの流れを書いておきます。 ご相談いただく場合の参考としてご活用ください。 Webサイトの運用サポートに関するご相談の場合 サイトのリニューアルや新規制作の場合 Webサイトの運用サポートに関するご相談の場合 お問い合わせいただく 打ち合わせの日程調整を行い、打ち合わせをさせていただく ふにすで対応できる内容かを検討し、プラン・お見積もりを作成する 現状の問題点の分析、改
「CMS案件の制作フローは変化する。先にCMSを導入し、あとでデザインする」を読んで - よつば手帖
菱川さんのブログの「CMS案件の制作フローは変化する。先にCMSを導入し、あとでデザインする」を読んで。 Facebookにシェアしようとしたら文章長いよ的な事を警告されたのでブログに書きます（笑） 制作フローを変化させていく 菱川さんのいう「先にCMSを導入し、あとでデザインする」という方向は増えていくと思う。 ただし、このフローが確立するにはクライアント（依頼者）のWebサイト制作への参加姿勢も重要。 丸投げしてた会社なんかは大きな意識改革をもとめられそう。 運営にはコストや時間がかかります。社内である程度やれる体制を作るか、外部に委託するか、どちらにしろそれなりのコストはかかってきます。 自動化もできないし、その会社を理解してる人じゃないと無理なので。 CMSって運営してなんぼなので当たり前といえば当たり前なんだけど。 でもまだWebサイトを会社案内程度に考えてるところが多いのも確か
Wix Vs WordPress: Battle Of The Best Website Creators [2024]
What is Wix? First, let’s get you up to speed on our two champions. First up: Wix. Wix is a complete website platform with everything you need to get started including buying a domain, getting hosting, and creating your online portfolio, blog, or ecommerce store with their fully-featured website building tool. Everything you need to get started from scratch, no third parties required, which is a
![Wix Vs WordPress: Battle Of The Best Website Creators [2024]](https://cdn-ak-scissors.b.st-hatena.com/image/square/790c4c2e837bc9561bec7ae12cc7133cdb15e044/height=288;version=1;width=512/https%3A%2F%2Fe8y8n8b5.rocketcdn.me%2Fwp-content%2Fuploads%2F2019%2F04%2Fwix-vs-wordpress.jpg)
Scalable Web Design [Article] | Treehouse Blog
I can remember a time when pretty much everyone designed websites for an 800×600 screen resolution, but (thankfully) those days are long gone. Smart watches and 4k displays are pushing resolutions at both ends of the spectrum, and even more devices fill the gaps between, such as desktops, tablets, phones, and gaming consoles. In parallel, the density of pixels is increasing, too. Designing for a s
![Scalable Web Design [Article] | Treehouse Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/7169014b46f5b7a44249e353fb391cbc16b445e7/height=288;version=1;width=512/https%3A%2F%2Fblog.teamtreehouse.com%2Fwp-content%2Fuploads%2F2013%2F10%2Fresponsive1.png)
Designing in the Browser ver. 1.0 RC
2013/09/14 (土) - 第15回リクリセミナー「Frontrend in Osaka」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Treehouse Blog
Loading...
実例から見る、CMSとレスポンシブデザインで変わるウェブ制作のワークフロー
A Modern Web Designer's Workflow
