フェーズと目的に応じたプロトタイピングの手法と意味 - クックパッド開発者ブログ
こんにちは。ユーザーファースト推進室の元山です。 みなさんはスマートフォンアプリケーションやWebサービスの開発・改善をするときにどのようなプロセスで行っているでしょうか？アジャイルやリーンなどの最近では一般的なよくある開発プロセスの中で、今やプロトタイピングは当たり前に行うものとなっていると思います。プロトタイピングを支援するアプリやWebサービスも数多くありますが、ただ闇雲にプロトタイプを作ればいいわけではありませんし、プロトタイプモックを作ること自体が目的化されては意味がありません。 クックパッドでもプロトタイピングを取り入れた開発プロセスを行っていますが、開発のフェーズであったり、または目的によってどのようなアウトプットとしてプロトタイピングするのかは変わってくると思います。今回はクックパッドで実際に行っているプロトタイピングについてフェーズや目的ごとにご紹介しようと思います。 コ
スケッチブック・Tシャツ・ワインボトルなど、様々なハイクオリティモックアップ素材まとめ - NxWorld
デバイスやステーショナリー系のモックアップ素材に関してはこのブログでも何度か紹介していますが、今回はそれ以外のモックアップ素材をまとめてみました。 スケッチブック・Tシャツ・カップ・ワインボトル・名刺・CDなど、様々な種類のモックアップ全60種類で、少し変更するだけで簡単にオリジナルデザインをつくれてしまうようなものが多いです。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
シームレスに利用できる クリエイティブかつデザイン的なベクターパターンまとめ「Pattern Design – 35 Seamless Free Vector Patterns」
シームレスに利用できる クリエイティブかつデザイン的なベクターパターンまとめ「Pattern Design – 35 Seamless Free Vector Patterns」 背景素材などでよく利用されるシームレスパターン素材。継ぎ目なく敷き詰められる点が非常に便利な素材です。今回はそんなシームレスベクターパターンをまとめた「Pattern Design – 35 Seamless Free Vector Patterns」を紹介したいと思います。 Abstract Hexagon Pattern Background on Behance デザイン的に非常に凝ったつくりが特徴のベクターパターン素材が多数紹介されています。 詳しくは以下 Patterns for Adobe Creative Cloud on Behance 色鉛筆で描き出したような、ラフなテイストが特徴のパターン。素
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
画面内の要素をピクセル単位で測定できるツール「Pixel Winch」 | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
iOSアプリの高解像度アイコンを入手する方法 - MEMOGRAPHIX
ここで探したい iOS アプリを探す http://sticky.linclip.com/linkmaker/画像サイズ「中」にしてコード作成する画面下のほうに出力された 100px x 100px のアイコンのURLをコピーする画像のURL末尾mzl.gmwgxoht.100x100-75.pngとかになってるのが画像サイズなので、mzl.gmwgxoht.pngとかにする原寸のアイコン見れる例Instagram 質感わかりやすくて便利 ラブライブ迫力あった ガールフレンド 江頭粗い
Illustrator実践講座-パス
Movable type-ベースにページを切り替えました 新しいページはこちらをご覧下さい。或いはHOMEから入って下さい 現在表示のページは、低解像度（狭い）モニタ用に残して有ります パスファインダは、重なり合った複数のパス同士で、合体、分割など、言わば四則演算によって、単純なパスを組み合わせて複雑な形状のパスを生成する、非常に強力な機能です。 なおパスファインダ機能を、パレットからでなくマウス操作で、一部代用する機能として、CS2から「ライブペイント」が、CS5から「シェイプ形成」が搭載されました。工事中。 ■ パスファインダパネル 操作は「パスファインダ」パネルで行います。 バージョン10から「パスファインダ」パネルが変わりました。 「パスファインダ」パネルは、「形状モード」と「パスファインダ」のカテゴリに分かれています。 「形状モード」４種類、「パスファインダ」６種類のボタンと、「
画像の作り方・使い方でファイルサイズを減らす方法
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
Illustrator ABC
Illustrator って、難しい？ Illustratorは奥が深くて、なかなかマスターできない……。そういうふうに捉えられてしまう原因には、なんとなく心当たりがあります。それは、Illustratorの機能が持つ「多面性」です。 Illustratorのブラシ機能を例にとってみましょう。この機能には、大きく分けて「モチーフを複製して散りばめる」「モチーフを複製して並べる」「モチーフを変形する」「線に抑揚をつける」の4つの性質があります。名前から察するに、せいぜい絵筆代わりに使うようなものだと思っていたら、大幅に裏切られる結果となるでしょう。そのうえ、このブラシ機能を利用するには、［ブラシツール］でドラッグする、［線］に設定する、の2種類の方法があり、目的に応じてちゃんと使い分ける必要があるのです。 たとえば額縁のようなフレームをつくるなら、「モチーフを複製して並べる」タイプを選択し、
商用利用OK・クレジット表示も不要の無料写真素材サイトまとめ 画像加工も安心な国内のサイトを厳選
商用利用可能な国内の写真素材サイトのまとめ。 いざという時に、ぴったりの写真が無い… 個人のブログなので、費用をかけたくない… そんな時に無料の写真素材サイトは役に立ちます。 そこで会員登録不要で質の高いサイトを厳選しました。 また使用に関して制限事項が多くあるサイトは除外しました。 とはいえ規約が変わる場合もあるので 各サイトにて必ず情報を確認してください。 フォトスク 4773枚以上の4000pxを超える高画質写真を無料でダウンロードできます。 個人・商用利用を問わず、加工しての使用も可能です。 [browser-shot width=”600″ url=”https://www.pakutaso.com/”] PAKUTASO 写真素材は、全て管理者が選定した上で公開。 高感度撮影時のノイズ処理、ゴミ取り、WB（色調補正）が 丁寧にされた写真素材です。 [browser-shot w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
GitHub - tommmmmmmmy/AndroidDesignTemplates: Action Barをはじめ、Androidアプリのだいたいのデザインを作成したいときに使えるテンプレートです。
デザイン仕様書(ガイド) の書き方(初歩用)
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
角が丸い立方体の作り方(イラストレーター)
Blog - hamfactory
新着記事
