<p>webデザインをしている中で、僕の場合はほとんどPSDなんですが、やはり他の人がどんな風にデザインしているのか、どんなテクニックを使っているのかというのは非常に気になる所です。</p>
<p>そんな中、有名で人気のあるサイトのUIがPSDでゲットできちゃうというサイトがありました。</p>
<p>Github,apple,facebook等のサイトのUIなんかがあります。</p>
<p>なんと教育目的(?)のたまに、正確にPSDでおこしたそうです。</p>
<p>appleに関しては、単純そうに見えて、意外と手が込んでました。。。</p>
<p>やはり「神は細部に宿る」ですかね。</p>
<p>そのサイトはこちらになります。</p>
<p><a href="http://lukechesser.github.io/Popular-UIs/" target="_target">Popular UIs | Free PSDs of popular Web Interfaces</a></p>
<p><a href="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2473" alt="Popular UIs  Free PSDs of popular Web Interfaces" src="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498.jpg" width="624" height="2485" srcset="/uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498-257x1024.jpg 257w, /uploads-archive/2013/06/Popular-UIs-Free-PSDs-of-popular-Web-Interfaces-e1372096753498-75x300.jpg 75w" sizes="(max-width: 624px) 100vw, 624px" /></a></p>
<p>そしてさらにもうひとつ。</p>
<p>50個の無料のwedデザインPSD、そして中にはHTMLソースまであるやつもあります！</p>
<p><a href="http://www.splashnology.com/article/50-new-and-free-psd-website-templates/9457/">50 New and Free PSD Website Templates | Splashnology.com</a></p>
<p>こんなものがあるなんて我々webデザイナーの役割って・・・って感じです。</p>
<p>まぁこれは海外のものなんでちょっと日本のとは違うので、使いづらいかもしれません。</p>
<p>ただ、非常に参考になります。</p>
<p>勉強させてもらいます！！</p>
<p>&nbsp;</p>


とてつもなく参考になるwebデザインのPSDをダウンロードできちゃうサイト

<p>この業界は、日々新しいことが生まれたり、技術に上限がなかったりと、</p>
<p>日々学んでいくことが必要とされていますが、</p>
<p>そのために必要な勉強会やサイトの情報を紹介します。</p>
<p>現段階で僕が知っている情報ですので、もっと他にもあればぜひぜひ教えて頂きたいです！！</p>
<p>紹介するのは、webサービスや勉強会、イベントサイトになります。</p>
<p>&nbsp;</p>
<h2>3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</h3>
<p><a href="http://dotinstall.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2452" alt="3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール" src="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg 1228w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-300x164.jpg 300w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-768x419.jpg 768w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-1024x559.jpg 1024w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトは素晴らしく、web系をまんべんなく網羅しています。<br />
全部やりきれば一人でほとんどのことはできるんじゃないでしょうか？<br />
無料という所も素晴らしいです！有料にすると、添削機能もつきます！</p>
<p>&nbsp;</p>
<p><a href="http://dotinstall.com/" target="_blank">3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</a></p>
<p>&nbsp;</p>
<h2>schoo（スクー） WEB-campus</h3>
<p><a href="http://schoo.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2453" alt="schoo（スクー） WEB-campus" src="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg 1228w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-300x164.jpg 300w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-768x419.jpg 768w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-1024x559.jpg 1024w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトはIT専門ってわけではなく、<br />
ビジネスマンのための学校をweb上で体現しています。<br />
その道のプロが毎週変わる変わるweb上で授業をしてくれます。<br />
動画配信なので、一回だけでなく、好きなときに見ることも出来ます。</p>
<p>無料で利用できますが、有料でも月500円なのでお得だと思います。</p>
<p>&nbsp;</p>
<p><a href="http://schoo.jp/" target="_blank">schoo（スクー） WEB-campus</a></p>
<p>&nbsp;</p>
<h2>TechAcademy [テックアカデミー] | ITに特化したスクール</h3>
<p><a href="http://techacademy.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2454" alt="TechAcademy [テックアカデミー]  ITに特化したスクール" src="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg 1228w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-300x164.jpg 300w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-768x419.jpg 768w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-1024x559.jpg 1024w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>こちらはweb系よりの学校で、お金はかかりますが、時間単位で換算すると、<br />
そこまで高くないかと思います。<br />
まだ一度も行ったことはないので、なにか参加してみたいなぁと思っております。</p>
<p>&nbsp;</p>
<p><a href="http://techacademy.jp/" target="_blank">TechAcademy [テックアカデミー] | ITに特化したスクール</a></p>
<p>&nbsp;</p>
<h2>ストリートアカデミー</h3>
<p><a href="http://www.street-academy.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2455" alt="ストリートアカデミー" src="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg" width="601" height="327" srcset="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg 1228w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-300x164.jpg 300w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-768x419.jpg 768w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-1024x559.jpg 1024w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-228x124.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p>こちらは、勉強会サイトで、IT/web専門というわけではないですが、比較的多く行われているようです。</p>
<p>&nbsp;</p>
<p><a href="http://www.street-academy.com/" target="_blank">ストリートアカデミー</a></p>
<p>&nbsp;</p>
<h2>イベントの決済ができるコミュニティ運営システム | Doorkeeper</h3>
<p><a href="http://www.doorkeeper.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2456" alt="イベントの決済ができるコミュニティ運営システム  Doorkeeper" src="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg 1228w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-300x164.jpg 300w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-768x419.jpg 768w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-1024x559.jpg 1024w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://www.doorkeeper.jp/" target="_blank">イベントの決済ができるコミュニティ運営システム | Doorkeeper</a></p>
<p>こちらは、勉強会告知のコミュニティサイトで、けっこうプログラムの要素が濃く、<br />
すでにコミュニティがいろいろと存在しているので、近くにあるならば参加してみたいですね</p>
<p>&nbsp;</p>
<h2>ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</h3>
<p><a href="http://everevo.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2457" alt="ライブ・クラブ・セミナー・イベントの集客管理ツール - everevo" src="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg" width="599" height="319" srcset="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg 1228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-768x410.jpg 768w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-228x122.jpg 228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-300x160.jpg 300w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-1024x546.jpg 1024w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>イベントツールのサイトですが、<br />
どちらかというと交流会要素が強いものが開催されているかなと思います。</p>
<p>&nbsp;</p>
<p><a href="http://everevo.com/" target="_blank">ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</a></p>
<p>&nbsp;</p>
<h2>イベント集客 告知 | 集客ならイベントアテンド</h3>
<p><a href="http://atnd.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2458" alt="イベント集客 告知  集客ならイベントアテンド" src="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg 1228w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-300x164.jpg 300w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-768x419.jpg 768w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-1024x559.jpg 1024w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>あらゆるタイプのイベントを集客するサイトなので、IT系はそこまで多くありません。</p>
<p>&nbsp;</p>
<p><a href="http://atnd.org/" target="_blank">イベント集客 告知 | 集客ならイベントアテンド</a></p>
<p>&nbsp;</p>
<h2>CSS Nite公式サイト</h3>
<p><a href="http://cssnite.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2459" alt="CSS Nite公式サイト - 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント" src="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg 1228w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-300x164.jpg 300w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-768x419.jpg 768w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-1024x559.jpg 1024w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>&nbsp;</p>
<p>言わずと知れたcss nite で説明するまでもないと思いますが、<br />
web系を学ぶための集まりとしてはうってつけで暇があればぜひ参加したいものばかり開催されています。</p>
<p>&nbsp;</p>
<p><a href="http://cssnite.jp/" target="_blank">CSS Nite公式サイト &#8211; 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント</a></p>
<p>&nbsp;</p>
<p>僕的には、もっとデザインよりのイベント・勉強会があればいいな〜と思っています。</p>
<p>参加できるときは参加して、もっと成長したいと思います！</p>


IT・web系の勉強をするためのwebサービス

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4478732205/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/41WCTT7FKSL._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4478732205/sackoh71-22/" target="_blank" >カエルを食べてしまえ!</a></p>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">ブライアン トレーシー ダイヤモンド社 2002-03    </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4478732205/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
<p>一昔前に、ベストセラーになったビジネス書ですが、（私も読んだのはかなり前です）最近、業務が膨大になってきたこともあり、ご紹介したいと思います。</p>
<p>※オフィスの本棚にもあります。</p>
<p>カエルを食べてしまえという奇抜なタイトルですが、内容は至って、真面目なビジネス書です。とても分かりやすくシンプルに例えた結果がカエルを食べるということです。</p>
<p>ちなみに、朝一番に大きくて醜いカエルを食べてしまえとは、一番重要な仕事のことである。</p>
<h2>以下抜粋</h3>
<p>1.目標をはっきりさせる</p>
<p>2.一日の行動をたてる</p>
<p>3.「80対20の法則」をすべてに当てはめる<br />
4.結果を考える<br />
5.常に「ABCD法」を実践する</p>
<p>→優先順位をつけるということ<br />
6.鍵となることに専念する<br />
7.能率の法則に従う</p>
<p>→すべてのことをするだけの時間はないが、最も重要なことをする時間は十分ある。</p>
<p>8.周到に準備する</p>
<p>9.宿題をする</p>
<p>10.才能を掘り起こす</p>
<p>11.足を引っ張っているものは何か？</p>
<p>12.一度に一樽ずつ</p>
<p>13.自分を追い込む</p>
<p>14.最大限の力を発揮する</p>
<p>15.自分を奮い立たせる</p>
<p>16.後回しにすべきもの</p>
<p>17.最も難しいものから始める</p>
<p>18.仕事をこま切れにする</p>
<p>19.まとまった時間をつくる</p>
<p>20.切迫感をもつ</p>
<p>21.仕事を中断しない</p>


カエルを食べてしまえ!

smtp local送信できない件

<p>本日もとあるセミナーに参加してきました。</p>
<p>「ECサイトはこれから何を改善すればよいのだろうか？」</p>
<ul>
<li>SEOツール</li>
<li>メール配信エンジン</li>
<li>翻訳ツール</li>
<li>サイト内検索</li>
</ul>
<p>と、ECサイトを運営する上で、必要ソリューション持ち合わせた各社のセミナーを聞いてきました。</p>
<p>その中でもオムニチャネルという考え方が非常にしっくりと来たので、一部紹介したいと思います。</p>
<p>&nbsp;</p>
<p>冒頭の画像はダイアモンドオンラインから<a href="http://diamond.jp/articles/-/25710" target="_blank">http://diamond.jp/articles/-/25710</a>お借りしたものになります。</p>
<h2>オムニチャネルの概念図</h3>
<p><img decoding="async" alt="" src="http://diamond.jp/mwimgs/a/d/500/img_ad2d99412fd889743be0200a9b344193433826.jpg" /></p>
<p>・シングルチャネル</p>
<p>顧客と店舗（ネット）</p>
<p>・マルチチャンネル</p>
<p>シングルチャネルの複合</p>
<p>・クロスチャネル</p>
<p>チャネル同士の交差がある</p>
<p><span style="color: #ff0000;">・オムニチャネル</span></p>
<p>最上位概念で、どのチャネルからもシームレスに顧客対応が出来る</p>
<h2>なぜいまオムニチャネルなのか？</h3>
<p>スマートデバイスの普及によりスムーズなチャネル間の移動が可能になった。</p>
<h2>参考</h3>
<p><a href="http://diamond.jp/category/s-omnich_ohshima" target="_blank">http://diamond.jp/category/s-omnich_ohshima</a></p>
<p>&nbsp;</p>
<h2>まとめ</h3>
<p>恥ずかしながらオムニチャネルという言葉自体初めて聞きました。弊社が運営するECサイトは、シングルチャネルですが、弊社が提供するECシステムのクライアント様は、店舗での小売をしながらECサイトを展開しているケースがほとんどであるため、このオムニチャネルという概念をしっかり理解した上で、よりよい提案に導いていきたいと考えました。</p>
<p>&nbsp;</p>


オムニチャネルという考え方

<p>Web上ではPDFファイルへのリンクを貼ることが度々あります。</p>
<p>ただその場合閲覧する側は、一度ページを離れなくてはならないだけでなく、</p>
<p>PDFがダウンロードされるのを待たねばならないため、あまり軽快とはよべないページになってしまいがちです。</p>
<p>&nbsp;</p>
<p>今回ご紹介するGoogle Docs Viewerは、Googleドライブを利用している方は</p>
<p>その中でファイルを開くときに、目にする機会も多いと思いますが、</p>
<p>コチラのビューアをWebページ内に設置して、</p>
<p>PDFなどのファイルを軽快に閲覧できるようにすることができます。</p>
<p>&nbsp;</p>
<p>今回はPDFで紹介しますが、他にも多くのドキュメントファイルの表示に対応しています。</p>
<p>対応しているファイル形式(<a href="https://support.google.com/drive/answer/2423485?p=docs_viewer&amp;rd=1" target="_blank">Googleドライブヘルプより</a>)</p>
<ul>
<li>画像ファイル（.JPEG、.PNG、.GIF、.TIFF、.BMP）</li>
<li>動画ファイル（WebM、.MPEG4、.3GPP、.MOV、.AVI、.MPEGPS、.WMV、.FLV）</li>
<li>テキスト ファイル（.TXT）</li>
<li>マークアップ/コード（.CSS、.HTML、.PHP、.C、.CPP、.H、.HPP、.JS）</li>
<li>Microsoft Word（.DOC、.DOCX）</li>
<li>Microsoft Excel（.XLS、.XLSX）</li>
<li>Microsoft PowerPoint（.PPT、.PPTX）</li>
<li>Adobe Portable Document Format（.PDF）</li>
<li>Apple Pages（.PAGES）</li>
<li>Adobe Illustrator（.AI）</li>
<li>Adobe Photoshop（.PSD）</li>
<li>Tagged Image File Format（.TIFF）</li>
<li>Autodesk AutoCad（.DXF）</li>
<li>Scalable Vector Graphics（.SVG）</li>
<li>PostScript（.EPS, .PS）</li>
<li>TrueType（.TTF）</li>
<li>XML Paper Specification（.XPS）</li>
<li>アーカイブ ファイルの種類（.ZIP and .RAR）</li>
</ul>
<p>&nbsp;</p>
<p>↓こちらがDEMOです。</p>
<p><a class="demo" href="/demo/ninomiya/22/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>設置の仕方</h3>
<h3>1.Googleドキュメントビューアのページを開きます。</h4>
<p>URL：</p>
<p><a href="https://docs.google.com/viewer" target="_blank">https://docs.google.com/viewer</a></p>
<p>&nbsp;</p>
<h3>2.表示させるPDFファイル(または表示に対応している他の形式のファイル)のURLを入力し、HTMLタグを生成します。</h4>
<p><img decoding="async" loading="lazy" alt="ファイルのURL入力" src="/uploads-archive/2013/06/ggl_dv01.jpg" width="656" height="438" /></p>
<p>&nbsp;</p>
<h3>3.生成したHTMLタグをWebページの表示させたい場所にコピー&amp;ペーストすれば、完了です。</h4>
<p><img decoding="async" loading="lazy" alt="HTMLタグ生成" src="/uploads-archive/2013/06/ggl_dv02.jpg" width="656" height="611" /></p>
<p>&nbsp;</p>
<p>※注意点</p>
<p>テスト環境などで、Basic認証などのアクセス制限がかかっていると、ビューアがPDFにアクセスできないため、</p>
<p>表示することができませんので、ご注意ください。</p>
<p>&nbsp;</p>
<p>Googleドキュメントビューアのサイトに毎回アクセスしてHTMLタグを生成しなくても、下の「ファイルのURL」のところに表示したいURLを入力すれば、Webページ内での表示が可能です。</p>

		<div id="crayon-64953fd58b483660315348" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;iframe src="http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true" width="565" height="780" style="border: none;"&gt;&lt;/iframe&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58b483660315348-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58b483660315348-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true"</span><span class="crayon-h"> </span><span class="crayon-e ">width</span>=<span class="crayon-s ">"565"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span>=<span class="crayon-s ">"780"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border: none;"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ただ、こちらのURLは普通のURLではなく、URLエンコード形式にする必要があります。</p>
<p>静的なサイトの場合はコチラのサイト（<a href="http://www.tagindex.com/tool/url.html">http://www.tagindex.com/tool/url.html</a>）などでエンコードして利用することができます。</p>
<p>PHPなど動的なサイトの場合は、「 <b>urlencode</b> ([ファイルのURL])」などの関数を使って、</p>
<p>利用することができます。</p>
<p>&nbsp;</p>
<p>現時点での欠点としては、<a href="/demo/ninomiya/22/" target="_blank">DEMO</a>で見ていただけると分かりますが、</p>
<p>写真などのラスター形式の画像は、画質が著しく劣化します。</p>
<p>画質を重視する場合は、あまりオススメできません。</p>
<p>&nbsp;</p>
<p>その分表示速度はとても速く、ファイルも軽いので、</p>
<p>軽快にPDFを表示したい場合にはとてもオススメです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

small_nino_eye130612.jpg

thumbnail_nino_eye130612.jpg

nino_eye130612.jpg

PDFなどをページ内で軽快に閲覧できるGoogle Docs Viewer

<p>スマホ対応などでCSS3を使う機会が増えているが</p>
<p>理論的には理解していてもグラデーションなどはソースだけではなかなかうまくできない。</p>
<p>視覚的に微調整できる便利なツールのメモ。</p>
<p>&nbsp;</p>
<h3>css3で単純なグラデーションを生成してくれるサービス</h4>
<p><a href="http://codologic.com/page/sites/all/files/gradx/demo.html" target="_blank">http://codologic.com/page/sites/all/files/gradx/demo.html</a></p>
<p>jQueryのプラグインとしても提供されており、無いと思うがユーザーにグラデーション方法を入力させることも可能。</p>
<p>サイトの装飾部分に使える感じ。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2430" alt="3" src="/uploads-archive/2013/06/3.png" width="869" height="637" srcset="/uploads-archive/2013/06/3.png 869w, /uploads-archive/2013/06/3-300x220.png 300w, /uploads-archive/2013/06/3-768x563.png 768w, /uploads-archive/2013/06/3-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Linerの例</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2418" alt="1" src="/uploads-archive/2013/06/1.png" width="869" height="637" srcset="/uploads-archive/2013/06/1.png 869w, /uploads-archive/2013/06/1-300x220.png 300w, /uploads-archive/2013/06/1-768x563.png 768w, /uploads-archive/2013/06/1-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Circleの例</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/06/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2416" alt="2" src="/uploads-archive/2013/06/2.png" width="869" height="637" srcset="/uploads-archive/2013/06/2.png 869w, /uploads-archive/2013/06/2-300x220.png 300w, /uploads-archive/2013/06/2-768x563.png 768w, /uploads-archive/2013/06/2-228x167.png 228w" sizes="(max-width: 869px) 100vw, 869px" /></a></p>
<p>Ellipseの例</p>
<p>&nbsp;</p>
<p>どれもかなり簡単にできるし、どのプロパティがどうゆう動きをするか勉強にもなる。</p>
<p>&nbsp;</p>
<h3>css3でボタンを生成してくれるサービス</h4>
<p><a href="http://css-button-generator.com/" target="_blank">http://css-button-generator.com/<a href="/uploads-archive/2013/06/4.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2417" alt="4" src="/uploads-archive/2013/06/4.png" width="1239" height="603" srcset="/uploads-archive/2013/06/4.png 1239w, /uploads-archive/2013/06/4-768x374.png 768w, /uploads-archive/2013/06/4-228x111.png 228w, /uploads-archive/2013/06/4-300x146.png 300w, /uploads-archive/2013/06/4-1024x498.png 1024w" sizes="(max-width: 1239px) 100vw, 1239px" /></a></a></p>
<p>&nbsp;</p>
<p>角丸やシャドウなど、細かく設定できるので便利。</p>
<p>&nbsp;</p>
<p>ソースから見た目はなんとなくイメージできれば良いと思うので</p>
<p>詳細はこのようなツールを使ったほうがよさそうだ。</p>


便利。css3グラデーション生成ツール2つ

<p>２週続けてcssniteに参加して参りました！</p>
<p>今回は<strong>『webデザイナーのための配色セオリー』</strong>ということで、<br />
最近悩まされているテーマ「配色」についてのセミナーでした。</p>
<p>講師は伊達千代さんという方で、<br />
<a href="http://www.amazon.co.jp/gp/product/4844361309/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844361309&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザインのルール、レイアウトのセオリー。</a><br />
<a href="http://www.amazon.co.jp/gp/product/4844358421/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844358421&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザイン・ルールズ デザインをはじめる前に知っておきたいこと</a><br />
<a href="http://www.amazon.co.jp/gp/product/4844360493/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4844360493&amp;linkCode=as2&amp;tag=alantrigger-22" target="_blank">デザイン、現場の作法。デザイン力を鍛える仕事術</a></p>
<p>といった著書があり、学校で講師をしていたりと素晴らしい方でした。</p>
<h2>webデザイナーのための配色セオリー</h3>
<p>内容としては、<br />
配色に関するセオリーや論理的に配色を組み立ていくための講義で、<br />
本でしか学んだことがなかったので、知っている内容であっても、<br />
人に教えてもらうのはまた違うなぁと感じました。</p>
<p>本記事で、どんなセオリーを学んだかは説明しませんが、<br />
(他に説明しているブログもいっぱいあるので・・・)</p>
<p>ちょっとした気づき、ハッとしたことを綴らさせてもらいます。</p>
<h3>配色はセンスがいい、悪いではなく、セオリーや知識を知っているかどうか</h4>
<p>→これは自分自身センスがいいとは思わないので、元気になるお話でした。<br />
先生自身もセンスはよくないとおっしゃっていたので、ホッとした記憶があります。</p>
<p>&nbsp;</p>
<h3>配色を裏付ける言葉と説明の重要さ</h4>
<p>→これはクライアントにデザインが「どうしたこうなったのか」を説明することは大事だということですが、<br />
認識はしていましたが、一つのデザインに対して２通りの説明をしてくれたことにより、<br />
その重要さを再認識しました。これは大事だな〜</p>
<p>&nbsp;</p>
<h3>配色スキルは磨くほど高くなる</h4>
<p>これはまとめでおっしゃっていたことですが、<br />
まぁ一朝一夕で身につくことではないですよね。。。<br />
まず、セオリーを把握、理解し、そこから実践し、<br />
いいものを研究することによって、どんどんスキルは高くなっていくということですね。</p>
<p>&nbsp;</p>
<h3>イメージの言語化、イメージマップの作成</h4>
<p>なにかのデザイン、配色をしようとしたら、まずそのイメージを言語化します。<br />
言語化することによって、相手に伝えやすくなりますし、自分の理解もすすみます。<br />
イメージマップとは、<br />
その言語化したものを元に見合った写真をたくさん集め、<br />
それをphotoshopに貼り、モザイクをかけることにより、<br />
イメージしたものの色のパレットが出来上がるというものです。<br />
今回これが一番タメになり、次の案件でぜひ試してみたいと思います。</p>
<p>&nbsp;</p>
<p>最後に</p>
<p>途中、スキルと言う言葉出てきたように、</p>
<p>配色は<strong>「センス」</strong>ではなく、<strong>『スキル』</strong>ということでしょうか。</p>
<p>頑張って磨いて、良い配色ができるよう精進したいと思います。</p>


Css Nite @Coedo vol.13 webデザイナーのための配色セオリーに参加してきました！

redmineをインストールしてみた

<p>海に周りを囲まれ、陸地の大半を野山が占める日本では、</p>
<p>青と緑は好まれ、デザインでも使われることが多い色です。</p>
<p>&nbsp;</p>
<p>青と緑は類似色で相性もいいので、共に使われることも多いですが、</p>
<p>サイトのデザインに使う場合、ほのぼのとした印象が強くなりがちなので、</p>
<p>スタイリッシュにまとめるのは難しい印象があります。</p>
<p>&nbsp;</p>
<p>今回は、この２色を使ったスタイリッシュなサイトを</p>
<p>青を多く使ったものを中心にまとめてみました。</p>
<p>&nbsp;</p>
<h4>アクアシャボン</h6>
<p><a href="/uploads-archive/2013/06/ss_site01.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site1" src="/uploads-archive/2013/06/ss_site01_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.aquasavon.jp/" target="_blank">http://www.aquasavon.jp/</a></p>
<p>メインビジュアルがグラデーションの効果で、きれいにまとめられています。</p>
<p>&nbsp;</p>
<h4>株式会社田部</h6>
<p><a href="/uploads-archive/2013/06/ss_site02.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site2" src="/uploads-archive/2013/06/ss_site02_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.tanabeco.com/" target="_blank">http://www.tanabeco.com/</a></p>
<p>サイト自体にはほとんど青が使われていませんが、</p>
<p>緑を中心とした写真を多く配置して、</p>
<p>緑を自然に感じることができます。</p>
<p>&nbsp;</p>
<h4>アクアセレクト</h6>
<p><a href="/uploads-archive/2013/06/ss_site03.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site3" src="/uploads-archive/2013/06/ss_site03_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.aquaselect.jp/" target="_blank">http://www.aquaselect.jp/</a></p>
<p>ロゴに軽く添えたり、写真に緑のあるものを使うことで、水と緑を感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>住まいのGood News</h6>
<p><a href="/uploads-archive/2013/06/ss_site04.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site4" src="/uploads-archive/2013/06/ss_site04_thum.jpg" width="656" height="472" /></a><br />
<a href="http://sumai.goodnews.jp/" target="_blank">http://sumai.goodnews.jp/</a></p>
<p>こちらも緑は写真メインといった感じです。</p>
<p>&nbsp;</p>
<h4>特定医療法人清翠会</h6>
<p><a href="/uploads-archive/2013/06/ss_site05.jpg" target="_blank"><img decoding="async" loading="lazy" alt="site5" src="/uploads-archive/2013/06/ss_site05_thum.jpg" width="656" height="472" /></a><br />
<a href="http://www.maki-group.jp/" target="_blank">http://www.maki-group.jp/</a></p>
<p>写真や、アイコンで緑を感じられます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>青をメインにした場合、緑は写真で配置したり、軽く添えるくらいが</p>
<p>スタイリッシュにする方法としてよいようです。</p>
<p>&nbsp;</p>


青と緑を使ったスタイリッシュなサイトまとめ

多機能なスライダー sly.js

<p>先日ソーシャルメディアマーケティングを得意とする会社のとあるセミナーに参加して来ました。</p>
<p>内容の核心に触れてしまうといけないかもしれないので、具体名は伏せつつ流れを紹介します。</p>
<p>&nbsp;</p>
<p>一般の主婦が年商3,000万円まで駆け上った軌跡を教えて頂きました。</p>
<h2>お店を作ったきっかけ</h3>
<p>旦那さんにプレゼントされたエプロン。</p>
<p>しかし、可愛くなくデザインに不満があった。</p>
<p>なんで可愛いデザインのエプロンがないのだろうと自分で作って販売することを決心。</p>
<h2>店長ブログで認知度を</h3>
<p>まず、この方は、独自サイトでショップを構築する。</p>
<p>独自サイトであれば、モールと違い、お客さんを呼び込む必要がありますので、まず、商品を認知してもらおうと店長ブログを開始</p>
<h2>ブロガーとの交流から自然と口コミが発生</h3>
<p>せっかく良い商品を作っても、埋もれてしまうことは往々にしてあります。</p>
<p>良い商品をしっかりと宣伝してこそ、商品は売れます。</p>
<h2>ソーシャルメディアの時代へ</h3>
<p>言わずもがなの昨今。オリジナル商品こそ、ソーシャルメディアとの相性がいいとのことで。同社のサービスを使いながら効果的に口コミを発生。</p>
<p>年商3,000万円へ。</p>
<h2>まとめ</h3>
<p>オリジナル商品を独自ショップでしっかりとブランディングすることが出来たモデルケースであると考えます。</p>
<p>モールで同様のキーワードで検索を欠けるとブランドものか極端に安いものが検索結果上位に上がってきているようです。</p>
<p>モールという特性上、人気のあるものを少しでも安くお探しのお客様が多いので、オリジナル商品の価値を認識してもらうことが</p>
<p>よに難しいと思います。</p>
<p>そこで、独自ショップという展開を取ったのだと思われますが、良い物をきちんとプロモーションして、認知を経てブランディングに</p>
<p>成功しています。</p>
<p>最初に取り組んだのが店長ブログというのも本質を得ている気がします。Googleの検索エンジンの数年先をよんでいたのでしょうか？</p>
<p>今でこそ、質の良いコンテンツがSEOで重要視されるアルゴリズムになっていますが、数年前は外部リンクが全盛の時代であったと思います。</p>
<p>最初から最後まで戦略がハマっているのが素晴らしいですね。</p>
<p>いろいろ試行錯誤の上、現在の形になって語られているのだろうとは思いますが、弊社でもこのようなモデルケースとなりうるECサイトを支援出来るように取り組んでいきたいと強く思いました。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


オリジナル商品はソーシャルメディアを！

【symfony2】symfony2.3がリリースされました

<p>まず、作成するページのheader部分に以下のjqueryを読み込みます。</p>
<p></p>

		<div id="crayon-64953fd58ac20205927015" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">header</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58ac20205927015-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58ac20205927015-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>さらに</p>
<p></p>

		<div id="crayon-64953fd58ac25340143111" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">header</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript"&gt;
$(function() {
    var topBtn = $('.totop'); 
	 
    //スクロールしてトップに戻る
    //500の数字を大きくするとスクロール速度が遅くなる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-2">2</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-4">4</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-6">6</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-8">8</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-10">10</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-12">12</div><div class="crayon-num" data-line="crayon-64953fd58ac25340143111-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac25340143111-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58ac25340143111-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-2"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">topBtn</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.totop'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-4"><span class="crayon-h">	 </span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//スクロールしてトップに戻る</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//500の数字を大きくするとスクロール速度が遅くなる</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">topBtn</span><span class="crayon-sy">.</span><span class="crayon-e">click</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body,html'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">scrollTop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">500</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58ac25340143111-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac25340143111-14"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>「上へ戻る」ボタンを置きたい場所に以下のソースを挿入。<br />
デザインはお好みにcssで調整してください。</p>
<p></p>

		<div id="crayon-64953fd58ac26426104124" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;p class="totop"&gt;
　&lt;a href="#header"&gt;
　　&lt;img src="/*表示したいボタンの画像*/" alt="上へ戻る"&gt;
　&lt;/a&gt;
&lt;/p&gt;
//ベッダー部分にあるheaderというidのところまでスクロールする</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58ac26426104124-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac26426104124-2">2</div><div class="crayon-num" data-line="crayon-64953fd58ac26426104124-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac26426104124-4">4</div><div class="crayon-num" data-line="crayon-64953fd58ac26426104124-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58ac26426104124-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58ac26426104124-1"><span class="crayon-h">&lt;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-t">class</span>=<span class="crayon-s">"totop"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac26426104124-2">　<span class="crayon-h">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-i">href</span>=<span class="crayon-s">"#header"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58ac26426104124-3">　　<span class="crayon-h">&lt;</span><span class="crayon-e">img </span><span class="crayon-i">src</span>=<span class="crayon-s">"/*表示したいボタンの画像*/"</span><span class="crayon-h"> </span><span class="crayon-i">alt</span>=<span class="crayon-s">"上へ戻る"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac26426104124-4">　<span class="crayon-h">&lt;</span>/<span class="crayon-i">a</span><span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58ac26426104124-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">p</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58ac26426104124-6"><span class="crayon-c">//ベッダー部分にあるheaderというidのところまでスクロールする</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

jQuery スクロールでページトップへ

<p>css niteのセミナーに初めて参加してきました！</p>
<p><a href="http://cssnite.jp/coedo/vol12/" target="_blank">『CSS Nite @Co-Edo, Vol.12<br />
あると便利！コンセプトシートの重要性と具体的な作り方＆伝え方』</a><br />
講師は、<a href="http://web-d.navigater.info/" target="_blank">Webディレクターズマニュアル</a>の運営者である<br />
中村さん。</p>
<p>僕もよく拝見させていただいています。</p>
<p>ということで、webサイト、webサービスを制作する際に必要な心得というか、<br />
フローを学んで来ました。</p>
<p>この記事では、ディレクターとコンセプトについて、<br />
簡単にかいつまんで説明したいと思います。</p>
<h2>ディレクターの重要性</h3>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;"><strong>「Webディレクターの本来の職域」</strong></span></p>
<p>&nbsp;<br />
<span style="font-size: medium;"><strong>■商談・見積もり作成</strong></span><br />
<span style="font-size: medium;"> <strong> ■スケジュールの管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■制作の運用・進行管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■成果物の品質管理</strong></span><br />
<span style="font-size: medium;"> <strong> ■システムの要件定義</strong></span><br />
<span style="font-size: medium;"> <strong> ■実装のチェック</strong></span></p>
<p>これは、会社によって違うと思いますが、だいたいこのぐらいの領域だと僕も思います。</p>
<p>簡単にいうと、ディレクターは</p>
<p>プロジェクトの<span style="color: #ff0000;"><strong>「中心」</strong></span>にいて、<br />
プロジェクトを<span style="color: #ff0000;"><strong>成功に導く役割</strong></span>を担っているとのことです。</p>
<h2>ディレクターがいないと？</h3>
<p>&nbsp;<br />
<span style="font-size: large;"><strong>「悲劇が生まれる」</strong></span></p>
<p>&nbsp;</p>
<p><span style="font-size: medium;"><strong>■クライアントや担当者の意見に流され延々修正</strong></span><br />
<span style="font-size: medium;"> <strong> ■デザイナー、プログラマーは大変、イライラが募る</strong></span><br />
<span style="font-size: medium;"> <strong> ■だんだんと成果物も悪くなる</strong></span><br />
<span style="font-size: medium;"> <strong> ■半端なままリリース</strong></span><br />
<span style="font-size: medium;"> <strong> ■ユーザーはもちろん集まらない</strong></span><br />
<span style="font-size: medium;"> <strong> ■結果、売上も成果も出ない</strong></span></p>
<p>&nbsp;<br />
&nbsp;</p>
<p>うん、こういうのは経験もあるので、うなづきながら聞いていました。</p>
<p>そしてこんな悲劇が起こらないようにするためには、、、</p>
<p>&nbsp;</p>
<p><span style="font-size: medium;">「ディレクターがサイトの</span><br />
<span style="font-size: medium;"> コンセプトを作成する必要がある」</span></p>
<p>&nbsp;</p>
<p>とのことで、<br />
こんなこともおっしゃっていました。</p>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;"><strong>「コンセプトを作るか</strong></span><br />
<span style="font-size: large;"> <strong> プロジェクトを破綻させるか」</strong></span></p>
<p>&nbsp;</p>
<p>これは極端ではありますが、<br />
このぐらいの気持ちを持ってやっていく必要があるということですね！！</p>
<p>&nbsp;</p>
<h2>コンセプトとは？</h3>
<p>&nbsp;</p>
<p style="text-align: center;"><span style="font-size: large;">「何かしらのサービスや商材を</span><br />
<span style="font-size: large;"> Webを通じてユーザーに届けるための</span><br />
<span style="font-size: large;"> 企画・設計・制作・運用を貫く</span><br />
<span style="font-size: large;"> 大きなテーマのようなもの」</span></p>
<p style="text-align: center;"><span style="font-size: large;">『そのテーマを</span><br />
<span style="color: #ff0000; font-size: large;"> 誰もが覚えられるキャッチーなカタチ</span><br />
<span style="font-size: large;"> にしたもの』</span></p>
<p>&nbsp;</p>
<h3>コンセプトがあると？</h4>
<p>&nbsp;<br />
<strong>1．何のためのコンテンツか？の根拠がハッキリする</strong><br />
<strong> 2．制作チームと「最終的に目指すところ」を共有しやすくなる</strong><br />
<strong> 3．クライアント担当とも目線を同じくできる</strong><br />
<strong> 4．ディレクターが主導権を握りやすくなる</strong><br />
&nbsp;</p>
<h3>もしもプロジェクトにコンセプトが無かったら</h4>
<p>&nbsp;<br />
<strong>・クライアントは「格好いいかどうか？」で判断して</strong><br />
<strong> ・デザイナーは「俺のやりたい事かどうか？」で判断して</strong><br />
<strong> ・プログラマーは「仕様書の通り」にしか作ってくれなくて</strong><br />
<strong> ・ライターは「その場のノリ」で原稿を書いて</strong><br />
&nbsp;<br />
うんうん、つまり、自分の作業を言われたことや自分の勝手な考えの範囲でしかやらなくなるって<br />
ことですね。</p>
<p>何のためにやるのかという目的がわからない、理解していないので、目先のことしか考えられず、<br />
プロジェクトの成功を意識しなくなってしまうわけですね。<br />
というか成功するかなんてどうでもいいのかもしれません。</p>
<p>なので、自発的に、<strong>「ここはこうしたほうがいいんじゃないか？」</strong>という意見や、<br />
<strong>制作物に対するこだわり</strong>なんてものは出て来なくなりますね。</p>
<p>そうなると、いいものなんて出来上がるわけがないですよね。</p>
<p><span style="font-size: large;">ディレクターは、プロジェクトを成功に導くために、</span><br />
<span style="font-size: large;"> 軸となるコンセプトを設定し、メンバーの意識を高め、</span><br />
<span style="font-size: large;"> メンバーが力を発揮できるよう、裏方で汗をかく</span>、ってことでしょうか。</p>
<p>こうすることによって、絶対上手く行く！ってわけではないけれど、<br />
主導権握って進めることができるので、<br />
コンセプトを立てて、提案していきましょう！とのことでした。</p>
<p>今後も参考にさせてもらいます！！</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/06/25

2013/06/19

2013/06/19

2013/06/19

2013/06/13

2013/06/13

2013/06/13

2013/06/13

2013/06/12

2013/06/06

2013/06/06

2013/06/06

2013/06/06

2013/06/05

2013/06/05

2013/05/30

2013/05/30

2013/05/30