Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報*ホームページを作る人のネタ帳

2011/04/15 1540 users SEO マーケティング ネタ帳 Web制作 初動

まとめの目次 ワイヤーフレームを学ぼうワイヤーフレーム＆モックアップ作成ツールSEOに対する基礎ところでどうしてキーワードが重要なのかマーケティングとSEOツール知っておきたいWebサービス ワイヤーフレームを学ぼう ワイヤーフレームとは、クライアントに初動で見てもらうためのサイトUI案です。 この段階である程度のコンテンツも視覚化できる為、最初にワイヤーフレームを作成する人も多いのでは無いでしょ... 続きを読む

ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker

2009/04/22 1469 users 骨組み DesignWalker プレゼンテーション 矛盾

ウェブサイトを構築する際にワイヤーフレーム（骨組み）からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。 また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。 今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました... 続きを読む

数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWeb屋の日常

2016/12/05 1203 users デザイ www.adventar.org ボク 笑顔 日常

2016 - 12 - 05 数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 【スポンサーリンク】 list Tweet なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて 面倒くさくなってきて激しく後悔した びっくりしたという。 ぼくはWebディレクターでありデザイ... 続きを読む

HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

2015/03/04 1149 users 前置き ひと 時点 HP作成 存在

長くなっちゃったので、前置きは手短に。 今回は、ホームページ作成に慣れた人にとっては、当たり前で欠かせない存在「ワイヤーフレーム」について書きました。 「なぜか、ホームページのデザインがうまくまとまらない」という初心者さんの中には、ワイヤーフレームの時点で失敗してるヒトが多いんじゃないかな、と思いまして。 「ワイヤーフレーム、なにそれ？」と、まるっきりワイヤーフレームを書かずに、初っ端からデザイン... 続きを読む

効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ

2014/01/06 1072 users コムテブログ 職種別 基礎 webデザイン フォント

Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配... 続きを読む

WEBディレクタなら参考にしたい手書きの画面設計書｜designaholic -Creative Column-

2011/02/18 1060 users designaholic WEBディレクタ 実物 手書き 参考

様々なアプリケーションを試し、試行錯誤しながらWEBサイトの画面設計を行ってますが、ぜひとも参考にしたい手書きのワイヤーフレームを紹介します。 まずはPCサイトですが、実物とあわせてどうぞ。   Five Years of Firefox     Five Years of Firefox 続きを読む

Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス

2012/10/03 963 users Webクリエイターボックス Webサ 連載 応用技術 実践

WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサ... 続きを読む

これが無料とは！ スマートフォン向けサイトやアプリのワイヤーフレームを作成するソフトウェア -Prototyper | コリス

2012/03/07 868 users iPhone コリス ソフトウェア 両OS Android

Windows XP/7、Mac OSX 10.5+の両OSに対応、iPhone, Android, iPad向け（デスクトップも）のサイトやアプリのワイヤーフレームを作成するソフトウェアを紹介します。 Prototyp [...] 続きを読む

ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | sogilog

2016/04/13 737 users sogilog 結果

枌谷 力（そぎたに　つとむ） 1972年11月7日生まれ。NTTデータでコンサル営業後、Webデザイナー/ディレクターに転身。2007年に独立し、2010年、下北沢に株式会社ベイジ設立。主にWebサイトのプロデュースとアートディレクション、デザインをやってます。Web制作のご相談は絶賛受け付けています。ご連絡は 東京のWeb制作会社ベイジ まで。 Facebookはこちら @sogitani_ba... 続きを読む

ウェブ制作に役立つ、便利な最近のオンラインサービスのまとめ -2011年1月 | コリス

2011/01/16 732 users コリス ウェブアプリケーション ウェブ制作 データベース 中心

最近リリースされたものを中心に、デザイン、スタイルシート、ワイヤーフレーム、データベースなどに役立つオンラインサービス・ウェブアプリケーションを紹介します。 続きを読む

ワイヤーフレームに使える素材いろいろ | DesignWalker

2010/05/05 644 users DesignWalker ウェブサイト 各要素 素材 ページ

以前、このブログでご紹介した「ウェブサイトの設計図 ワイヤーフレームを活用しよう」 ウェブサイトをデザインする前に、用意すると、とっても便利なワイヤーフレーム。 ページの各要素をレイアウトして、デザイン制作をスムーズに行うことが出来ます。 今回は、そんなワイヤーフレームに使える素材をいろいろとまとめてみました。 Design Stencils – Design Pattern Library – ... 続きを読む

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦｜note

2018/09/01 635 users 榊原昌彦 LAB Note 手書き Microsoft

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレ... 続きを読む

便利すぎるPhotoshopのプラグイン30選｜ferret [フェレット]

2015/05/19 579 users Ferret フェレット extensions ヘッダ

便利すぎるPhotoshopのプラグイン30選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなどがそれぞれ10種類以上収録されており、Photoshopを起動後4回選択すればレイアウトが完成します。 ワイヤーフレームを... 続きを読む

ワイヤーフレーム（モックアップ）を作るアプリがすごい進化してた |　バニデザノート

2015/04/07 560 users モックアップ プロジェクトフォルダ バニデザノート アプリ

ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね？」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてす... 続きを読む

最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles | コリス

2014/12/09 556 users コリス Sketch psd グリッド ポートフォリオ

最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles ダウンロードできる素材のフォーマットは、4種類。 .psd（7... 続きを読む

楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 ｜ クラスメソッド開発ブログ

2012/11/05 528 users クラスメソッド開発ブログ スマホアプリ 観点 ツール ユーザー

ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fl... 続きを読む

7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法 | TomoyukiArasuna.com

2016/06/09 474 users ワイヤーフレーム通り 実例 デザイン セリフ 後輩

「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」... 続きを読む

面接の経験豊富なCEOが教える、面接者が聞くと良い8つの質問 ｜ ライフハッカー［日本版］

2014/10/17 467 users CEO ライフハッカー 面接 面接者 経験

今月頭に、私の会社のデザイナーを採用する面接をしました。面接者は「御社のアプリのワイヤーフレームはどこが作っているのでしょうか？　プロダクトチームですか？　それともデザインチームでしょうか？」と質問しました。簡単な質問ですが、その質問をきっかけに会社の制作工程に関する話や、その中で面接者がどのように貢献できるかなど、良い話し合いができました。 私は「あれ、なんだかもう一緒に働いているような感じ..... 続きを読む

[CSS]初心者にも分かりやすいスタイルシートのチュートリアル | コリス

2009/10/14 454 users コリス Wireframe チュートリアル CSS htm

スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。Step 1. Wireframe – HTM... 続きを読む

Webサービスを作る人必見！Cacooでワイヤーフレームを作ろう - nanapi Web

2011/11/26 452 users nanapi Cacoo 筆者 ナナピウェブ 職種

nanapi Web[ナナピウェブ]は、みんなでつくるWebサービスのノウハウ共有サイトです。ワイヤーフレームや図をWeb上で作れるサービス。共有機能やチャット機能が充実しており、コラボレーションしながら作成できるのが特徴。 8人のユーザー1件のみんなの使い方9件のレシピ Cacooは凄い 筆者は、Webディレクターという職種を10年近くやっています。Webディレクターの仕事とは簡潔にいって 企画... 続きを読む

知ってるようで知らなかった！Web制作でワイヤーフレームが担う役割と重要性

2012/09/04 442 users ソシャマノート インスピレーション 意義 役割 Web制作

（読了時間3分） こんにちは、ソシャマノートのこのみです♪ときどきデザイン系ブログでみかける、海外のWebデザイナーがしたためたワイヤー・フレーム。眺めているだけでもとっても楽しくてインスピレーションをもらえるのでついつい見入っちゃいます（^-^*） でもよくよく振り返るとワイヤーフレームの意義について、そこまで深く考えた事がなかったかもしれない（=o=;）！？ 良いワイヤーフレームとは何なのか？... 続きを読む

Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋

2013/08/06 424 users Bootstrap バンクーバー マッハ ブラッド UIキット

フラットデザインにしろ、レスポンシブにしろ、僕は周りで良く使われているなと思う物は一応手を付けてみるようにしてきました。それが自分の土俵なら尚更っすね。 その上で、なぜ今それが流行っているのか、なぜそのデザインを採用する人が増えているのか、そういった物を理解するには、自分の手で作るのがてっとり早いと思っているからです。まぁ、フラットについては正直やってみたけど良く分からなかったのが正直な所ですが（... 続きを読む

最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ | コリス

2016/04/08 420 users コリス Dribbble ユーザーフロー Web制作 勉強

プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。 最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹 ...記事の続きを読む 続きを読む

エンジニアでも知っておきたいデザインの基礎知識 - Qiita

2019/10/05 405 users コーダー Qiita コーディング English エンジニア

→ English 対象読者 ワイヤーフレームだけが渡されてコーディングしなければいいけないようなケースで役立つ知識を紹介します。 以下のような環境にいるエンジニアは読む必要はないと思います。 毎回デザイナーからデザインデータが用意されて、それを忠実に再現すればよい そもそもコーディングはコーダーがやってくれ... 続きを読む

Webサイトのワイヤーフレームを作成するときに役立つツール・素材まとめ - W3Q - Web制作者のお悩み解決サイト

2013/06/28 388 users オンラインツール W3Q 作業 作成 WEB制作者

Webサイトのワイヤーフレームを作成するときに役立つツール・素材まとめ ワイヤーフレームの作成は骨の折れる作業ですが、事... / オンラインツール / Mockup Designer他...全28件 続きを読む