ウープスデザインブログ: October 2005 アーカイブ

Oct 3

ボク流サイト構築フロー

そういえばサイトをリニューアルしたのに触れていなかった。せっかくなんでかわいい我が子を徹底解剖しようじゃないか。

パクられるようなデザインでもないので公開してみます。奇特な方はダウンロードしてみて下さいな。

（1）原稿を用意する
サイト名だとか、トップページに掲載する内容だとかですね。今まではデザインと同時進行でしたが最初にやっておかないと、のちのちごまかさないといけなくなってくるので、しっかり用意するようにしました。

（2）添削・順位付け・グループ分け
そろった原稿の優先順位を付けていき、上から並べていきます。マークアップすることを念頭に置いていきました。そうすると、何にかかっているかわからないような余計な文章などが添削できるのでいい感じです。ここで注意したいのが、音声ブラウザのこと。

優先順位としてみたら確かにサイト名は一番重要なのですが、音声ブラウザでは</Tile>内も読み上げるので、サイト名を一番上に持ってきた場合2回連続で読まれてしまうことになるんですよね。きっと音声ブラウザで見ている方は、「まだかなー」なんて思ってるんだろうな。そう考えるとむしろ重要なのは記事のタイトルということになります。ということでサイト名は一番下くらいに。</p> <p>（3）マークアップ<br /> 最初は＜hn＞から、その次＜p＞そして、＜ul＞＜ol＞＜dt＞最後に＜div＞でグループ分けしました。（2）の作業をしているので楽ちんでしたよ。※完璧なるWeb標準を目指す方はHTMLLintなどで文法チェックをしつつ修正しましょう。ボクは…。えへへ。</p> <p>（4）デザイン<br /> Illustratorで800*600のキャンバス内にデザインして、CSSでどう実現しようかと考えました。<br /> そしてdivでくくるところのid・class名を決めておいて、それぞれの横幅・高さ等を調べて書き留めておきました。</p> <p>（5）画像書き出し</p> <p>（6）CSS記述<br /> Firefoxで「Webdeveloper」と「Aardvark」を入れておけば、ブラウザ上で確認しながら作業できます。重宝してますよー。</p> <p>（7）完成</p> <p>音声ブラウザで読み上げられる順番とレイアウトの順番が真逆だったのでどう実現しようかと悩みました。divで入れ子にしてfloatを使い分けて実現。驚いたのはクライアントのサイトを組むと動作確認で絶対つまづくのに自分のサイトの時は1発で綺麗に表示されたこと。いつもこうだったらいいのに…。<br /> 時間のあるときにHTMLlintで修正していこうと思います。</p> </div> <div class="EntryFooter"> <p class="entry-footer"> <a class="permalink" href="http://blog.woopsdez.jp/2005/10/post_13.php">パーマリンク</a>| <a href="http://blog.woopsdez.jp/2005/10/post_13.php#comments">コメント (0)</a>| <a href="http://blog.woopsdez.jp/2005/10/post_13.php#trackback">トラックバック (0)</a></p> </div> </div>  <div class="Entry"> <div class="EntryHeader"> <p><span class="Month">Oct</span><span class="Date"> 3</span></p> <h3><a href="http://blog.woopsdez.jp/2005/10/post_12.php">なんだかんだいって結局アナログに戻るボク。</a></h3> </div> <div class="EntryBody"> <a href="http://b.hatena.ne.jp/entry/http://blog.woopsdez.jp/2005/10/post_12.php"> <img src="http://b.hatena.ne.jp/entry/image/http://blog.woopsdez.jp/2005/10/post_12.php"> </a> <p>高校生の頃からネットを頻繁に利用して日記を公開したりしていたけれど、<br /> もういい年になってきてネットで公開できる事と出来ないことがいろいろ出てきました。</p> <p>それでも何かで形に残したい時があるんですよね。<br /> 結局自分の手帳にそういった日記を書く事にしました。<br /> 「王様の耳はロバの耳」の穴見たいなものです。</p> <p>ネットに公開していると第三者に説明することを想定してしまうので、<br /> 自分の表現の引き出しではうまく伝わらなかったりします。</p> <p>その点自分の秘密の日記は好きに書けばいいから気が楽ですね。<br /> さていつまで続く事やら。</p> </div> <div class="EntryFooter"> <p class="entry-footer"> <a class="permalink" href="http://blog.woopsdez.jp/2005/10/post_12.php">パーマリンク</a>| <a href="http://blog.woopsdez.jp/2005/10/post_12.php#comments">コメント (0)</a>| <a href="http://blog.woopsdez.jp/2005/10/post_12.php#trackback">トラックバック (0)</a></p> </div> </div>  <div class="Entry"> <div class="EntryHeader"> <p><span class="Month">Oct</span><span class="Date"> 3</span></p> <h3><a href="http://blog.woopsdez.jp/2005/10/illustrator10_photoshop.php">Illustrator10 Photoshopにパスを貼り付けるとき</a></h3> </div> <div class="EntryBody"> <a href="http://b.hatena.ne.jp/entry/http://blog.woopsdez.jp/2005/10/illustrator10_photoshop.php"> <img src="http://b.hatena.ne.jp/entry/image/http://blog.woopsdez.jp/2005/10/illustrator10_photoshop.php"> </a> <p>今までのバージョンだとPhotoshopへの貼り付け時に「ピクセル」「シェイプレイヤー」「パス」のどの形式で貼り付けるか聞かれていたのに、Illustrator10からPhotoshop7へパスをペーストするとき、何も聞かれずピクセルで貼り付けられてしまう。何故？と思って環境設定を見ていたら解決。</p> <p>「ファイル・クリップボード」のダイアログの下の方にクリップボードのコピー形式を選択できるところがありました。ここでAICBにもチェックを入れてあげたらphotoshopにペースト時、今まで通り3種類聞いてくれました。</p> <p>パスを保持・アピアランスを保持、どちらでも大丈夫みたいです。<br /> しかしながら（）でくくって書いてあるとおり「透明サポートなし」とあるのでアピアランスを使用しているものを貼り付けるときは注意が必要かもしれませんね。</p> </div> <div class="EntryFooter"> <p class="entry-footer"> <a class="permalink" href="http://blog.woopsdez.jp/2005/10/illustrator10_photoshop.php">パーマリンク</a>| <a href="http://blog.woopsdez.jp/2005/10/illustrator10_photoshop.php#comments">コメント (0)</a>| <a href="http://blog.woopsdez.jp/2005/10/illustrator10_photoshop.php#trackback">トラックバック (0)</a></p> </div> </div>  <div class="Entry"> <div class="EntryHeader"> <p><span class="Month">Oct</span><span class="Date"> 3</span></p> <h3><a href="http://blog.woopsdez.jp/2005/10/illustrator10.php">Illustrator10 写真から色を抽出する</a></h3> </div> <div class="EntryBody"> <a href="http://b.hatena.ne.jp/entry/http://blog.woopsdez.jp/2005/10/illustrator10.php"> <img src="http://b.hatena.ne.jp/entry/image/http://blog.woopsdez.jp/2005/10/illustrator10.php"> </a> <p>【Illustrator10についてのメモ書き】</p> <p>Illustrator8まではスポイトツールで写真から色を抽出できていたのが、Illustrator10では出来なくなっていました。「うわー。面倒くさーい」と思っていろいろググッたら解決。</p> <p>Shift+スポイトツールだったのですね。</p> <p>これってShift必要なの？うーむ。</p> <p>当たり前のことからもしれないけどボク自身わからなかったので書いておきます。<br /> 他の人の役に立てたらいいですね。</p> </div> <div class="EntryFooter"> <p class="entry-footer"> <a class="permalink" href="http://blog.woopsdez.jp/2005/10/illustrator10.php">パーマリンク</a>| <a href="http://blog.woopsdez.jp/2005/10/illustrator10.php#comments">コメント (0)</a>| <a href="http://blog.woopsdez.jp/2005/10/illustrator10.php#trackback">トラックバック (0)</a></p> </div> </div> <div class="Bg_navi"> <div class="navi"> <h3>Category Archives</h3> <ul class="menu"> <li class="module-list-item"><a href="http://blog.woopsdez.jp/100website/" title="">100website（7）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/200webservice/" title="">200webservice（10）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/300tips/" title="">300tips（6）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/400tools/" title="">400tools（2）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/450dtp/" title="">450dtp（3）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/480webdev/" title="">480webdev（8）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/500diary/" title="">500diary（56）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/600music/" title="">600music（4）</a> </li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/700report/" title="">700report（2）</a> </li> </ul> <h3>Monthly Archives</h3> <ul class="module-list"> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2008/01/">January 2008（15）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/12/">December 2007（22）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/11/">November 2007（33）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/10/">October 2007（21）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/09/">September 2007（18）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/08/">August 2007（24）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/07/">July 2007（19）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/06/">June 2007（40）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/05/">May 2007（30）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/04/">April 2007（97）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/03/">March 2007（20）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/02/">February 2007（11）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2007/01/">January 2007（18）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/12/">December 2006（26）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/11/">November 2006（35）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/10/">October 2006（50）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/09/">September 2006（15）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/08/">August 2006（20）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/07/">July 2006（17）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/05/">May 2006（10）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/04/">April 2006（61）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/03/">March 2006（31）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/02/">February 2006（26）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2006/01/">January 2006（5）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2005/12/">December 2005（8）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2005/10/">October 2005（4）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2005/09/">September 2005（6）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2005/08/">August 2005（9）</a></li> <li class="module-list-item"><a href="http://blog.woopsdez.jp/2005/07/">July 2005（17）</a></li> </ul> <form method="get" action="http://woopsdez.jp/mt/mt-search.cgi"> <input type="hidden" name="IncludeBlogs" value="2" /> <label for="search"> <input id="search" class="textinput" name="search" size="20" value="サイト内検索" onfocus="if(value=='サイト内検索｢') {value=' '}" onblur="if(value==' ') {value='サイト内検索'}" /></label> <input type="submit" class="buttonSubmit" value="go" /> </form> <iframe src="http://woopsdez.nowa.jp/blog_parts/?status_message_rows=5&is_profile=1&size=160&color=nowa_color" name="nowa-blog-parts" width="160px" height="494px" title="nowa ブログパーツ" frameborder="0" onload="if(navigator.userAgent.toUpperCase().indexOf('MSIE 6')!=-1){this.height=parseInt(this.height,10)+1;}"><a href="http://woopsdez.nowa.jp/">nowaやってます</a></iframe> <a href="http://awasete.com/show.phtml?u=http%3A%2F%2Fblog.woopsdez.jp%2F"><img src="http://img.awasete.com/image.phtml?u=http%3A%2F%2Fblog.woopsdez.jp%2F" width="160" height="140" alt="あわせて読みたい" border="0"></a> <script type='text/javascript' charset='Shift_JIS' src='http://blog-emotion.com/BP/emo/emobp.js' ></script><script type='text/javascript'>emo.init('-LF2ZHIQ-ULTDxGCpYMjRcE5SFdIRnzqLSUMlChfzP2cQ2P1.lwc.mqiUTxOcT97w3Bxs6IftRkv.QyCsk5YOAC0NnZfKsbYIizlu2KDq.0_', '', '20071010114214_emo_0001','1747');</script> <h3>Personalize Radio with Me.<small><a href="http://www.last.fm/listen/user/fastfargroove/recommended/100">powered by Last.fm</a></small></h3> <p>私が良く聴いている曲から、おすすめをチョイスして再生してくれています。</p> <object width="340" height="123"><param name="movie" value="http://panther1.last.fm/webclient/57/defaultEmbedPlayer.swf" /><param name=FlashVars value="viral=true&lfmMode=radio&radioURL=lastfm://user/fastfargroove/recommended/100&restTitle=my Recommendations " /><param name="wmode" value="transparent" /><embed src="http://panther1.last.fm/webclient/57/defaultEmbedPlayer.swf" width="340" FlashVars="viral=true&lfmMode=radio&radioURL=lastfm://user/fastfargroove/recommended/100&restTitle=my Recommendations " height="123" type="application/x-shockwave-flash" wmode="transparent" /></object> <h3>My Recent Tracks <small><a href="http://www.last.fm/listen/user/fastfargroove/recommended/100">powered by Last.fm</a></small></h3> <a href="http://www.last.fm/user/fastfargroove/?chartstyle=basicrt10"><img src="http://imagegen.last.fm/basicrt10/recenttracks/fastfargroove.gif" border="0" alt="fastfargroove's Profile Page" /></a> </div> </div> </div> </body> </html>

デザイナーをしています。おもしろいコト大好き。イベントに参加したりカンタンなwebサービスを作ったりもときどき。twitterだけがとりえです。twitter id ; woopsdez

ボク流サイト構築フロー