サイトのデザイン作成のとき、近頃は必須の配置物として、ソーシャル系のボタンがリクエストされます。 コーディングの時にボタンを入れ込むわけですが、デザインカンプにももちろん必要。でもほとんどがカウントとともにJavascriptで用意されているので、画像ベースの素材がありません。その都度、縦型、横型、数字入り、数字なしなどキャプチャしてバックグラウンドと四隅を1ピクセルづつ切って…とやってるわけですが、面倒なので、誠に勝手ながら、ここに置いておくことにしました。もちろん、実物大です。 つまり、ドラッグ、または右クリックでコピーしてFireworksに貼り付ける用のボタンサンプルです。だれが必要？私が必要♪ Twitter ツイートボタン サンプル カウント数ありの、縦、横、カウントなしボタン、そして英語ver.。 サイズ(px)：左より、「80*62」「横可変*縦20」「80*20」「横可変

もっと現場で使える「本気のワイヤーフレームの書き方」を公開しました。 ワイヤーフレームの書き方は、それこそディレクターさんによって千差万別。 手書きが一番だ！と叫ぶ人もいれば、Fireworksラブ！なんて人もいて、使用するフォーマットもマチマチ。 なので、ここでは僕がやっている「使えるワイヤーフレーム」を僕なりのやり方で紹介させていただき、読んでいる殊勝なかたがたのお役に立てばなぁと思います。 僕の場合、ワイヤーフレームを使って脳内シュミレート（サイトが使いやすいかどうか？のテスト）をするので、一般的なワイヤーフレームというよりは、どちらかといえばプロトタイプに近いものを作ります。 ピクセルは等倍で、フォントサイズも大まかには合わせて、原稿はすべて入れてしまいます。 なんでワイヤーでそこまでやるんだって？決まっています。そのほうが楽だからです。 ワイヤーの多くは、「あくまでレイアウトの草

娘二人からサンタさんにお願いするプレゼントが書かれた手紙をもらった ishidaです。 かわいいシールと、かわいいぬいぐるみですって。なんて素朴なのっ！ さてさてFireworksでワイヤーフレームを作成する機会が最近かなり増えてきてます。 今日もゴリゴリとFireworksでワイヤーフレームで作ってます。 そんなタイミングで、Fireworksのワイヤーフレームに使用できるパーツまとめサイトが公開されていました。 まだ公開されてまもないので、あまり充実はしてませんが 以下のようなパーツがダウンロードできます。 コンテンツが充実されれば、僕のようにワイヤーフレームをFireworksで作成するユーザーにとってはうれしいサイトですね。 詳細は以下から。 http://fireworkswireframingkit.com/

フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方

どのページをつくるか？ まずトップページ。 体裁が変わるようであれば下層ページも作ります。 また、システムが入るプロジェクトでは画面遷移図としてつくることもあります。 結局のところプロジェクトによります。 競合他者調査 競合他者がどのようなサイト設計を行ってるか参考にします。 他サイトの設計は試行錯誤の結果辿り着いた設計とも言えます。 全く同じ設計にしてしまうのは問題がありますが、 「何故そのような設計にしたか？」を考える事でワイヤーフレームをつくる時の参考になります。 例えば賃貸のサイトではトップの目立つ場所に検索メニューがあります。 賃貸サイトでユーザーが一番求めてるのは賃貸検索ではないか、と考察できます。 （これは誰でも分かる例ですが…） また、ユーザーは過去の体験から次のアクションを予想します。 過去に賃貸サイトを利用した方なら、賃貸サイトで地図を見れば「地域から賃貸を探す」を連想

2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK

こんにちは、最近怪我の多いYKKです。 みなさんはワイヤーフレームを作成する際にどの程度作り込んでいますか？ ペンで紙にザッと描いた手書きのもの、PowerPointやIllustratorを使った簡単な企画書レベルのもの。PhotoshopやFireworksを使ってある程度デザインされたもの。 このワイヤーフレーム（サイトの骨組み）の段階でクライアントとも詰めておけると、その後が大変スムーズに進行できます。 今回はワイヤーフレームを作成する際に役立つサイトをいくつかご紹介します。 I ♥ wireframes スマートフォンやiPadなども含め、約840点のワイヤーフレームを掲載。 flickrでのワイヤーフレームコミュニティ Websites We Visit: How They Look Like 10 Years Ago 有名サイトの10年前のデザインと現在のデザインを比較してい

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。