デッサン力とWebデザイン
2017年6月29日 Webデザイン Webデザインをやるのにデッサンなんて必要あるの？そう思っている人も多いと思います。確かにPhotoshopを使えば写真を手書き風に加工したり、イラスト風にすることも可能です。アイコンだって商用で使えるアイコンはたくさん出まわっていますね。それでも私は「デッサン力は必須ではない」けれど「あった方が絶対にいい」と思っています。そんなデッサンについて書いてみます。 ↑私が10年以上利用している会計ソフト！ アンケート結果 [poll id=”2″ type=”result”] こっそり行ったアンケート第二弾！一位は「自信はないけど描ける」という答えでした。２位以下は近差でしたが、「無理！」という人が一番少ないですね。この答えからも見えてくるデッサン力の必要性。あれ、そもそもデッサンってなんなんでしょ？ デッサンとは デッサンとは、目で見た物体の形状や質感、
PS、AI両対応！アイデアを具体的な形にする無料ワイヤーフレーム素材まとめ
思いついたアイデアをより具体的な形にするときに使えるワイヤーフレーム。Webサイト作成のときに活用できるアイテムを中心に、無料ダウンロードできる各種ワイヤーフレームをまとめて今回はご紹介します。 PhotoshopやIllustratorで編集できるのはもちろん、プリント印刷して手書きできるテンプレート素材や、レイアウトが難しいレスポンシブデザイン対応のアイテムなど幅広くあつめています。今後のプロジェクトに利用してみてはいかがでしょう。 詳細は以下から。 PS、AI対応！アイデアを形にする無料ワイヤーフレーム素材まとめ Vector Apple Outline Device PSD Ai iPhoneやiPad、Macbookなど人気のApple製品をアウトラインのみで描いた素材で、ワイヤーフレーム以外にも使えるデザイン要素の強いアイテム。 Vector Browser Outline P
モックアップ大解剖！利用する理由から使い方まで総まとめ
[fancy_box]海外デザインブログDesignModoで公開された「The What, Why, and How of Mockups – Designmodo」より許可をもらい日本語抄訳しています。[/fancy_box] 今回はモックアップの作成方法を見ていく前に、モックアップとは一体何なのか、何ができるのか詳しく見ていきましょう。 The Guide to Wireframing（詳しい紹介はこちらのエントリーで触れています。）でも取り上げていますが、モックアップとワイヤーフレームフレーム、そしてプロトタイプはしばしば混乱しやすく、それぞれの正確な情報を見つけにくくなります。しかしどれもUXデザインプロセスにおいて必要不可欠で、より最新の注意を払う必要があります。 まずはじめに、モックアップ作業がどのようにデザインプロセスにフィットするのか見ていきましょう。 各用語の意味を知ろ
コンセプトに基づいたフレームワークの設計（前編）
ワイヤーフレームとは ワイヤーフレームとは、Webページのレイアウト図（図1）です。「画面のどこに、何を配置するのか」を決めていく設計図のようなものですね。「デザイン的な要素を含まないコンテンツ（写真や文字など）の配置図」と考えてもらえればいいでしょう。 通常は、実際のデザインに入る前に、トップページやコンテンツページのワイヤーフレームを設計します。もちろん、イメージはデザインもワイヤーフレームの設計も同時に膨らませていきますが、ワイヤーフレームの方は「伝えたいこと」を機能的に配置しなければならないという使命をもっているので、イメージを想起させるデザインとは分けて考えます。 ワイヤーフレームの研究 実際に設計する前は、いろいろなWebサイトのワイヤーフレームを見て研究することが大切です。特に同じコンセプトや目的をもったWebサイトは、訴求する内容もコンテンツも同じだったりするので、どうして
ワイヤーフレーム制作の５つのアプローチ
ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
カンプがなくなったときのデザイナーの役割
手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks
レスポンシブWebデザイン対応のサイトを1から作ってみた手順と感想 | RCBlog
「とりあえずJavaScriptとレスポンシブWebデザインは使えるようになった方がいい」なと思い、レスポンシブWebデザインに対応した架空のサイトを1から制作してみました。その時の作業メモ＋作りながら思ったことを、記事として残しておきたいと思います。 作ったサイト 札幌すずき整形外科（実在しない病院です） とある病院（整形外科）から『出先でも見られるようにスマートフォンに対応したサイトを制作して欲しい』という依頼を受けたという設定で作ることにしました。 構成を考える 患者さんが出先で検索した時＝病院にかかりたい時だと想定して、「診療時間・曜日」「住所」が一番に知りたい場所だと考え、それらの情報を極力上の方にまとめる事にしました。 PCで見た時もそれらの情報は優先して見せたいと考え、それぞれの端末で見た時のワイヤーフレームを作ります。レイアウトはスマートフォン・PCの2パターンで考えていき
Web屋が使う３４個の「シンプル・簡単・便利」なウェブツールまとめ
作成：2012/10/29 更新：2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の２つご覧ください。（※ 2015/06/25 2015/06/28追記） Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
2013年3月23日 Webサイト制作, 便利ツール Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派！」という人のためのPDFテンプレートを紹介します。 ↑私が10年以上利用している会計ソフト！ オンラインで使えるワイヤーフレーム作成ツール iPlotz iPlotzのWebサイト とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。 トライアルをするにはまずトップページから「Get S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nyle Engineering Blog
Loading...
http://nh-lab.com/web-portfolio-wireframe/
in the looop | Looops communications