初心者〜中級｜スマホサイト作成の9ステップと大切にしたい事
スマホサイトはあなたが「パソコンサイトを作る技術」を持っていれば作ることが出来る。 なぜならばインターネット上のサイトであるのはパソコンサイトと同じだからだ。 しかし技術は同じであってもスマホサイトを作る前に知らないといけない知識が確実に存在する。 この記事では自分でスマホサイトを作ろうとしている人に向けて9ステップで全ての作成工程をお伝えする。 この記事を読んであなたのビジネスに直結するスマホサイトをぜひ作って欲しい。 多くの方に読んで頂こうと基本的なことも書いた。ご存じの所があれば読み飛ばして頂いて構わない。 ＜目次＞ ステップ０：スマホサイト完成までの全ステップ ステップ１：要件定義からはじめよう １－１ 目的の明確化 １－２ ターゲットの選定 １－３ 同業サイトチェック（類似業種等でも可） １－４ パソコンサイトの数値把握 １－５ パソコンでスマホサイトを見る方法
ウェブデザインの十戒
ウェブデザインにおいて鉄則という言葉を使うのは個人的にあまり好きではないですが、共通するルールというか、考えておきたいところは幾つかあります。ひとつはウェブという媒体を理解することだと思いますが、サイトを構築する前に考え起きたいことは他にもいろいろあります。 先日 Business Week に掲載された「The 10 Commandments of Web Design」では、Don Norman, Jeffrey Zeldman, John Maeda をはじめ 15名の著名人が集まってウェブデザインの十戒をまとめています。Best and Worst of the Web のギャラリーを一緒にみて参考にすると良いと思います。 汝、Flashを悪用するべからず コンテンツを隠すべからず ページを散らかすべからず 汝、反射効果を使い過ぎることなかれ Web 2.0 企業を名付けるとき余計
webサイト製作中に俺が陥りがちなこと11 - the cycles of activity
一週間でできるなーとか見積もっちゃうできない！できるのは骨組みだけだ！修正とかエラーチェックとかしてると時間だけは無駄に食う！おまえに一週間でできる仕事はない！トップページのデザインをして終わりだと思うリーフなんてトップの焼き増しだし、リーフなんて適当にあとでやりゃいいやと思いがち。んなこたない、リーフのデザインはどれだけそのサイトに時間がかかっているかを見極めるポイントである。CSSだけで構築された「このサイトについて」なんてコンテンツは寂しすぎる。グラフとか絵が必要、であればしっかりと書き下ろすべきなのだ！スタイルシートの名前を適当につけるDIV.column DIV.leftとかやっておきながら、後でDID.column DIV.inner DIV.leftとか作っちゃう、すると前に書いた奴を引きずっちゃう、ウザイ。ちゃんと考えろ構造を、ちゃんと後先考えろ！なんでそんな名前つけてんだ
企業ウェブサイトが気をつけることランキング - ネタフル
本当は企業のウェブサイトで困ってしまうことランキングなのですが、裏返せば、企業が気をつけた方がいいということな訳で。 インターネットで気になる商品の詳細を調べたり、企業情報を調べたりしているときに、インターフェースの使い勝手の悪さや閲覧性の低さに「何なんだ、このウェブサイトは！」と叫んでしまった経験——。誰しも一度はあるのではないでしょうか？ 企業がウェブサイトを持っているのは当たり前、さらにブログを持っている企業というのも増えていることでしょう。 ただ、持っているだけでは宝の持ち腐れで、何らかの形で営業やマーケティングに活用したいものです。 ウェブサイトを活かすも殺すも担当者次第‥‥ということで「企業のウェブサイトで困ってしまうことランキング」を見て、自社サイトを振り返ってみてはいかがでしょうか。 1位 情報が数ヶ月間更新されていない 2位 画像が多くて、重い 3位 「準備中」のコンテン
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました
こんにちは。Windowsの最大の発明はゴミ箱の標準装備だと思っている亀本です。 追記：Mac信者の某氏にゴミ箱はWindowsの発明じゃないと突っ込まれてしまいました。すみません<(｡_｡)> 昨日はグリーさんのオープンソース勉強会に参加してきました。 今回の講師はDeNAの川崎さんで、わりとモバイル屋さんな自分としてはぜひともチェックしておきたいなと思って参加してきました。 勉強会・懇親会ともなかなか面白い話が聞けたり、変な人がいっぱいしたりしてとても面白かったです。 モバイルをやっているといつも面倒なのは、テンプレートの扱いです。 そのあたりのまとめは以前このブログでうちの高橋さんが超まとめてくれた記事があるので、そちらをご参照ください。 とくにDoCoMoのCSS(i-CSS)は開発者泣かせですね。インラインのみに対応とか、開発しにくくて涙ちょちょぎれそうです。 さてさてそんなDo
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
楽してプロっぽいデザイン | Forty-N-FiveBlog
MovableTypeで作成してきたこちらの「楽してプロっぽいデザイン」はデザインの陳腐化に伴いWordPressベースのサイトに移行しました。 ブログ移行先：https://www.forty-n-five.site/ 引き続きご愛顧の程お願いいたします。 また、Photoshopのチュートリアルを中心としたyoutubeも運営を始めました。 youtube運営チャンネル：https://www.youtube.com/channel/UCXZMAcX7vukJ2iQg7EEVbGQ?view_as=subscriber | パーマリンク | コメント (0) | トラックバック (0) |
これだけは知ってほしいウェブデザインの常識 インターネット-最新ニュース:IT-PLUS
電通、三菱UFJ信託銀行など大手企業が相次ぎ参入を表明する「情報銀行」。ここに挑むベンチャー企業がDataSign（東京・渋谷）だ。同社の太田祐一社長は情報銀行という言葉が生まれる…続き 中部電力が「情報銀行」参入へ 電力データを活用 ［有料会員限定］ 「情報銀行」説明会に２００社 データ流通の枠組み始動
見やすいサイトの条件
最近は単にデザインや動きに圧倒されるより、どれだけ見る人に負担を与えないかというサイトに感動します。あくまでも観る側として条件をまとめてみます。 軽い……すぐに表示される ごちゃごちゃしない……無駄に迷わせない 文字が小さくない……小さい文字は読みたくない 色・配置に意味がある……使ううちに操作を覚えやすい 目的がすぐにわかる……不要な場合はすぐ離脱できる およそこの５点。 こういう視点で見やすいと思うサイトをいくつかご紹介。 日刊イトイ新聞 おもしろいことを教えようという目的があって、読みやすいテキスト、おそらく誰も嫌わないデザイン。技術的なことは置いておいて、考えが見えてくるサイトだと思います。 東京アートビート 使っている色の意味や目的もすぐにわかります。全体に見やすさと賑やかさのバランスが丁度よく、無駄なデザインもなく軽くできています。 Google 見やすいサイトが義務みたいなサ
プログラマでも出来るWebデザイン - Blog.37to.net
home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成： 2007-01-08T01:58:41+09:00 更新： 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳
WEB制作に役立つWebサービスやツール等、合計37のブックマークまとめ。 とりあえず全て無料をあつめました。 Webサイト作成のお供にFLASH関連 Wink デスクトップのマウスの操作を含めた動きを全てFLASHへ変換するソフト。 途中注意書きを追加したり、要らない部分のカット等も出来ます。完成したムービーに次へボタンをつけたりも出来ますし、ローディングバーもつけれます。 使い方 2.0にバージョンアップ その他使いやすいデスクトップを動画にするキャプチャ マニュアル作成が１０倍楽になるソフトがありました Flashできれいなパイチャートや円グラフを無料で作る いまはやりの丸グラを作るのにフラッシュの知識がなくても簡単に作れるツール。 動画をまとめて配信するフラッシュコンテンツの作成 各種動画サイトの複数映像をまとめて表示するツール。 役立つWEBサービス 白地図、世界地図、日本地図が
bookreader.js
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
新規でサイトを作るのに使えそうなの一式。Ver 2｜CSS HappyLife
新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード（zip：18kb） ちなみにダウ
TempRedirect
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/HkZDSqyE1do?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 3
テキストにメタル・光・水・草・キャンディーなどのエフェクトを使用したPhotoshopのチュートリアルの紹介です。 各サイトは英語ですが、キャプチャ付きで作成方法を説明しています。一部のサイトでは、PSDファイルをダウンロードできます。
CSS Decorative Gallery - Web Designer Wall
Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple
[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いろいろなサイトのフォームのログインを集めた -Login Forms Design Showcase
Faviconギャラリー・ジェネレータまとめ | DesignWalker
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
