最高のモックアップツールかもしれないBootstrap Studio - Qiita
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
デザイナーが伸び悩まないためのスキル27分類 | CA BASE CAMP | CyberAgent Developers Blog
前回の記事で18分類までを紹介 前編 → https://developers.cyberagent.co.jp/blog/archives/4875/ 後編 → https://developers.cyberagent.co.jp/blog/archives/5038/ ケーススタディ CASE 01：可視化してフィードバック 以前の記事でも書かせていただいていますが、そもそも27分類のスキルの使い道はここにあります。日々の面談や評価のフィードバックなど、デザイナーメンバーとの対話の際に以下の様なシートを使っています。 シートには、各フェーズごとの9項目と “ よかった ” と “ 期待 ” の欄があります。 よかった → 成長した、達成できた 期待 → いま足りていない 「よかった」と「期待」は2〜3項目でづつピックアップして書くのがルールです。全て書いてしまうと結局どこが良くて、ど
できたてほやほや！デザイン戦略チームってなにするの？ - Pepabo Tech Portal
ペパボのシニアデザイナーをしている咲 @satosio です。 2011年に入社してから、heteml→PEPABO WiMAX→Goopeと異動をかさね、 2017年7月1日から技術部デザイン戦略チームに配属となりました。 Goopeのまえはロリポップ！でリブランディングに参加していたので、多くのサービスを渡り歩いてきた感じがしますが、ついにサービスを持たない部署に入ることになりました。 この記事に書いていること デザイン戦略チームを『新設した経緯』と『いまとこれから』を紹介していこうと思います。 まず、ペパボのデザイナーは各サービスに所属している、いわゆる縦割りの組織です。一方で、インフラエンジニアやカスタマーサービスは、サービスをまたぐ横割りの組織となっています。 そして今回、新しくつくったデザイン戦略チームは、デザイナーの横割り組織になります。メンバーは、シニアデザイナーの @si
デザイナーのための自分サービス開発のススメ/ web service development tips for designers
2017/4/26 『渋谷開催！デザイナーLT＆交流会（BASE×ノハナ×マネーフォワード×みんなのウェディング）』 https://mwed.connpass.com/event/54099/ 発表資料
クックパッドとマイクロサービス - クックパッド開発者ブログ
技術部の高井です。 最近、日本でもマイクロサービスという言葉が流行しつつあります。 今回は、なぜクックパッドがマイクロサービスを選択したのか、また実際にどのようなやり方をしているのかということを紹介します。 Conwayの法則 ここ数年の間、クックパッドはレシピの投稿・検索サービスから「食を中心とした生活のインフラ」として事業領域を拡大しつつあります。海外レシピサービスの買収による海外展開は、単なる金銭的な関係にとどまらず、人的・技術的な交流も含めて本格化しつつあります。また、「モバイルファースト」を標語とするモバイルアプリケーションへの取り組みも加速してきました。 事業領域の拡大やグローバル展開、モバイルファーストといったビジネス要求の変化に応じて、会社の組織構造も変化しています。そして、Conwayの法則 として知られているように、組織構造とソフトウェアアーキテクチャには密接な関係があ
デザインのヒアリング。何を聞く？ 確認内容。ゴールのヒント、眠ってる。｜アトオシとデザイン｜note
◎ デザインのヒアリング。何を聞こうかな。 良いデザインをつくる流れ、第一弾。ヒアリング。初回の打合せ。クライアントさんに、聞くべきこと、共有すべきこと。しっかりとできれば、とても良いスタートが切れます。じゃあ、何聞くの？ カフェのロゴデザインを例に挙げます。確認内容は、大きく分けて2つ。デザインの「概要」と「方向性」。 ------------ A. デザインの「概要」01. 何をつくりたいか？ 例. ロゴ 02. なぜ、つくりたいか？ 例. 新規集客のため 03. 納品希望スケジュールは？ 例. オープンの30日前 04. なぜ、カフェを立ち上げたか？（お店をつくる背景、ストーリー） 05. カフェが目指す、目標は何か？（月売上○円などの目標） ここまでは、何となく想像できたのではないでしょうか。こっからが大事。私がヒアリングの際、必ず聞き、確認を取る3点。これを聞かずに、帰れな〜い！
【2017年に使うべき！】あなたの効率を上げる最新Webデザインサービス6選
ウェブデザイナーや開発者の役に立つツールは毎月のようにリリースされていますが、一体どれが優れていてどれがそうでないか見分けられているでしょうか？ あなたのプロジェクトに最適なのはどれでしょう？お金を出す価値のあるものはどれでしょう？ ここでは特におすすめのサービスを6つご紹介します。 1.IMCreator.com 新しいサイトを作成する際には多くの選択肢があります。HTMLでデザインを組むか、WordPressのテーマを使うか、ドラッグ＆ドロップでデザインできるビルダーを使う手もあります。その中で最速かつ最安なのがIM Creatorです。 IM Creatorは無料で使うことができ、レゴブロックで遊ぶようにレスポンシブでモダンなサイトを制作できます。数多くの美しいテンプレートが用意されており、自由に調整できます。数分でストアを立ち上げてビジネスを初めることもできますよ。 2.Xfive
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
![[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/973ddf236729b95ec2af2884162bebe179d65cb5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016111201.png)
デザイナーがタダ働きにNOと言うべきことが分かる動画 | デザインコラム・ブログ | デザイン作成依頼はASOBOAD
スペックワークを知っていますか？ 日本ではあまり定着していない言葉ですが、「スペックワーク (SPEC WORK)」というものが海外の広告デザイン業界で問題視されています。スペックワークを平たく言えば、「気に入ったらお金を払うよ (気に入らなければ払わない)」という類のクライアントからの要求です。 カナダの広告代理店 Zulu Alpha Kilo は、そんな業界のスペックワークについてNOを掲げ、5年前から提案依頼書の8割を断るという英断を行いました。当初は社員・クライアント含め、非常に混乱したそうですが、その結果、この5年間一度もスペックワークを行わず成長を遂げてきたのです。 そんなZulu Alpha Kiloが、一風変わった映像を制作しました。これを観ればデザイン業界の「スペックワーク」がいかに良くないことであるかが理解できます。スペックワークにNOというべきである！(Say no
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
DTPデザイナーの苦しみがよく分かるビンゴが闇過ぎて憤死する人続出「なにこの地獄ビンゴ」 - Togetterまとめ
JURO1068 @JURO1068 素人の手すさびめいた業務だし、正直現職をデザイナーと呼べるかどうかもわからんのだが、あるあるすぎて乾いた笑いしか出ないぞメーン pic.twitter.com/0Q4vX2Ndop 2016-07-22 09:54:25
Web開発でもアプリ開発でも使える状態遷移図を自動生成するツールを作りました - Qiita
概要 先日こちらの記事でgraphvizを使って状態遷移図を作成する方法をご紹介したのですが、これでもまだ複雑で記述量も多いのでとっつきづらいと思い、このgraphvizのソースコードを自動生成して画像を出力するコマンドラインアプリケーションを作成しました。 このアプリケーションはPyagram（ぱいあぐらむ）といい、その名前から察しがつくかと思いますがPythonを使用して開発されました。開発期間は１日でした。 このPyagramを使うことで複雑な状態遷移図を比較的簡単に作成することができるようになりますので、以下でご紹介したいと思います。 状態遷移図の描き方についてはこちらの記事を参考にしています。 出来上がりの図は以下のような感じになります。 図には幾つかのオブジェクトがあります。 図のタイトル（最上段） ビュー（二重丸） サーバサイドの処理（灰色の背景の一重丸） 画面遷移（破線の矢
フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://designer-draft.jp/articles/12
デザイナー死亡かるた
長文日記