前回、無料のCMSについての記事を書きましたが、
今回そこででてきた「joomla」について簡単ではありますが、書きたいと思います。
&nbsp;
<h2>Joomla!（ジュームラ）とは</h3>
Joomla!（ジュームラ）とは、
タイトル通り、コンテンツマネジメントシステム（CMS）と呼ばれるホームページ構築システムのひとつです。
Joomla!はオープンソースで開発されており
数あるCMSの中で、世界で8.8%(2012年11月現在)とwordpressに次ぐシェアです。
<a href="http://www.joomla.org/download.html" target="_blank">joomlaのダウンロード</a> 
<a href="http://sourceforge.jp/projects/joomla/" target="_blank">Joomla!じゃぱん 日本語同梱パッケージ</a>
<h2>Joomla!（ジュームラ）の特徴</h3>
<ul>
<li>Joomla!3.0はレスポンシブ対応
・・・Bootstrap（CSSのフレームワーク）を使用</li>
<li>会員管理機能
・・・標準で付いており、会員へメール一斉送信や会員用ページ作成など機能満載。</li>
<li>フォーム
・・・標準で簡単なお問い合わせフォーム機能が付いている</li>
<li>拡張機能
・・・エクステンションと呼ばれる、コンポーネント・プラグイン・モジュールが豊富。</li>
<li>複数人でのサイト運営
・・・標準でアクセスコントロール機能が付いているので、簡単に権限を付けられる。</li>
<li>更新のしやすさ
wordpressのようなエディタはもちろん、ワードやパワーポイント感覚で、webの更新が出来る</li>
<li>PHPが実行できる</li>
</ul>
&nbsp;
<h2>実際に使用されているサイト</h3>
ユニセフやIKEAで使用されているようですが、 
下記URLを見ていただけるとかなり多くの事例があります。
<a href="http://community.joomla.org/showcase/sites.html" target="_blank">http://community.joomla.org/showcase/sites.html</a>
&nbsp;
<h2>インストールしてみた</h3>
&nbsp;
実際の管理画面と、サンプルで使用できるサイトが以下になります。 
サンプルで使用出来るのはブログタイプ、通常のサイトがあります。
管理画面 
<a href="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2659" alt="test - Administration - Control Panel" src="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg" width="632" height="409" srcset="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg 1143w, /uploads-archive/2013/07/test-Administration-Control-Panel-768x497.jpg 768w, /uploads-archive/2013/07/test-Administration-Control-Panel-1024x663.jpg 1024w, /uploads-archive/2013/07/test-Administration-Control-Panel-228x148.jpg 228w, /uploads-archive/2013/07/test-Administration-Control-Panel-300x194.jpg 300w" sizes="(max-width: 632px) 100vw, 632px" /></a>
サンプルサイト 
<a href="/uploads-archive/2013/07/Home.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2660" alt="Home" src="/uploads-archive/2013/07/Home.jpg" width="632" height="611" srcset="/uploads-archive/2013/07/Home.jpg 1143w, /uploads-archive/2013/07/Home-300x291.jpg 300w, /uploads-archive/2013/07/Home-768x744.jpg 768w, /uploads-archive/2013/07/Home-1024x992.jpg 1024w, /uploads-archive/2013/07/Home-228x221.jpg 228w" sizes="(max-width: 632px) 100vw, 632px" /></a>
最新のjoomla!3をインストールしてみたんですが、 
アップロードでえらい時間かかりました。
インストールとしては、DatabaseのPHPがverが5.3.1以上ではいけないという箇所以外は、 
特につまずくことなく出来ました。
その手順なんかはまた改めて書きたいと思います。

無料CMSツール「joomla」について

うちの会社でももう一度振り返る必要もあるかもしれませんが、 
他の方々、会社さんはどのようなフローでやっているのかが気になる所です。
この流れをお客さんと共有し、 
トラブルを軽減できるようになれたら素晴らしいですね。
やはり、トラブルの元は、
「認識の違い」
が主になってくるのだと思います。
「ここはこうだと思ってた」、「これはできると思ってた」 
 「この後どう進むのか」、等々 
少しのズレが、大きくなり、重なることでトラブルが起こってしまうのではないかと思います。
それでは、記事にして頂いてる方を記載したいと思います。
&nbsp;
<h2>web制作の流れ</h3>
&nbsp;
<a href="http://www.ar-ch.org/mt/archives/2012/05/web-3.html" target="_blank">Webサイト制作の一連の流れをまとめてみました | Arch</a> 
順番がしっかりしており、非常に参考になります。
&nbsp;
<a href="http://vanidesign.blog.fc2.com/blog-entry-64.html" target="_blank">きっとトラブルが起きにくい！ウェブデザインの制作順序を書きました。 |　バニデザノート</a> 
簡潔に流れを説明してくれおり、シンプルでわかりやすいです。
&nbsp;
<a href="http://www.webcreatorbox.com/tech/website-before-start-ready/" target="_blank">誰のため？何のため？Webサイトを作り始める前に。 | Webクリエイターボックス</a> 
こちらは、実際にwebデザイナーがwebサイトを作るまでの流れで、プロジェクトとしての流れとは若干違い、 
作業の方法等を丁寧に説明してくれています。 
序盤の流れは、考えるべきことかと思います。
&nbsp;
<a href="http://webdesignrecipes.com/web-development-flow/" target="_blank">Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ</a> 
上記同様な内容と似ています。 
どちらもフリーの方なので、「一人でやる場合」というイメージの方が強いかもしれません。
&nbsp;
<a href="http://design-spice.com/2011/06/23/website-rough/" target="_blank">私がwebサイトのラフデザインを制作する時の流れ │ Design Spice</a> 
こちらはデザインを起こす順序が書かれており、他人の進め方を見れ、非常に参考になります。
&nbsp;
上記のリンクは流れとしては、 
個人よりで、作業としての流れだったので次はディレクターがやるべきことで、 
サイト制作を成功へと導くための記事を紹介します。
&nbsp;
<h2>ディレクターがすべきこと</h3>
&nbsp;
<a href="http://web-d.navigater.info/cat1/13-1.html" target="_blank">プロジェクトの開始までにWebディレクターが用意するものとこと13個まとめ | Webディレクターズマニュアル</a>
&nbsp;
<a href="http://maka-veli.com/d-plan-threerules.html" target="_blank">ディレクターが思う。Webサイト設計時に必ず注意したい2つのこと（+1） / Maka-Veli .com</a>
&nbsp;
<a href="http://www.mdn.co.jp/di/articles/2108/" target="_blank">第1回　Webディレクターが押さえておくたったふたつのポイント &#8211; MdN Design Interactive</a>
&nbsp;
<a href="http://www.mdn.co.jp/di/articles/2107/" target="_blank">第2回　クライアントとのより良い関係を導くディレクション手法 &#8211; MdN Design Interactive</a>
&nbsp;
こちらは制作の流れというよりも、 
webサイトの根底の部分を決めるための方法で、 
この根底をしっかり決め、お客さんと共有することで、 
途中、コロコロデザイン変更の修正について言われたり、 
そもそものコンテンツが変わったり、 
仕様が変わったりといったことを 
避けられるのではないのでしょうか。
それ以前に、webサイトとして小手先でない、 
意味のあるwebサイトが出来上がるのではないかと思います。
ぜひいいwebサイトを作って、 
お客さんに満足してもらいたいと思います！
おまけ 
<a href="http://www.yasuhisa.com/could/article/why-designers-fail/" target="_blank">デザインが失敗してしまう理由 : could</a>

もう一度見直してみよう！web制作の流れについてのまとめ

webデザインをしている中で、僕の場合はほとんどPSDなんですが、やはり他の人がどんな風にデザインしているのか、どんなテクニックを使っているのかというのは非常に気になる所です。
そんな中、有名で人気のあるサイトのUIがPSDでゲットできちゃうというサイトがありました。
Github,apple,facebook等のサイトのUIなんかがあります。
なんと教育目的(?)のたまに、正確にPSDでおこしたそうです。
appleに関しては、単純そうに見えて、意外と手が込んでました。。。
やはり「神は細部に宿る」ですかね。
そのサイトはこちらになります。
<a href="http://lukechesser.github.io/Popular-UIs/" target="_target">Popular UIs | Free PSDs of popular Web Interfaces</a>
<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>
そしてさらにもうひとつ。
50個の無料のwedデザインPSD、そして中にはHTMLソースまであるやつもあります！
<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>
こんなものがあるなんて我々webデザイナーの役割って・・・って感じです。
まぁこれは海外のものなんでちょっと日本のとは違うので、使いづらいかもしれません。
ただ、非常に参考になります。
勉強させてもらいます！！
&nbsp;

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

この業界は、日々新しいことが生まれたり、技術に上限がなかったりと、
日々学んでいくことが必要とされていますが、
そのために必要な勉強会やサイトの情報を紹介します。
現段階で僕が知っている情報ですので、もっと他にもあればぜひぜひ教えて頂きたいです！！
紹介するのは、webサービスや勉強会、イベントサイトになります。
&nbsp;
<h2>3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</h3>
<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>
このサイトは素晴らしく、web系をまんべんなく網羅しています。 
全部やりきれば一人でほとんどのことはできるんじゃないでしょうか？ 
無料という所も素晴らしいです！有料にすると、添削機能もつきます！
&nbsp;
<a href="http://dotinstall.com/" target="_blank">3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</a>
&nbsp;
<h2>schoo（スクー） WEB-campus</h3>
<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>
このサイトはIT専門ってわけではなく、 
ビジネスマンのための学校をweb上で体現しています。 
その道のプロが毎週変わる変わるweb上で授業をしてくれます。 
動画配信なので、一回だけでなく、好きなときに見ることも出来ます。
無料で利用できますが、有料でも月500円なのでお得だと思います。
&nbsp;
<a href="http://schoo.jp/" target="_blank">schoo（スクー） WEB-campus</a>
&nbsp;
<h2>TechAcademy [テックアカデミー] | ITに特化したスクール</h3>
<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>
こちらはweb系よりの学校で、お金はかかりますが、時間単位で換算すると、 
そこまで高くないかと思います。 
まだ一度も行ったことはないので、なにか参加してみたいなぁと思っております。
&nbsp;
<a href="http://techacademy.jp/" target="_blank">TechAcademy [テックアカデミー] | ITに特化したスクール</a>
&nbsp;
<h2>ストリートアカデミー</h3>
<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>
こちらは、勉強会サイトで、IT/web専門というわけではないですが、比較的多く行われているようです。
&nbsp;
<a href="http://www.street-academy.com/" target="_blank">ストリートアカデミー</a>
&nbsp;
<h2>イベントの決済ができるコミュニティ運営システム | Doorkeeper</h3>
<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> 
<a href="http://www.doorkeeper.jp/" target="_blank">イベントの決済ができるコミュニティ運営システム | Doorkeeper</a>
こちらは、勉強会告知のコミュニティサイトで、けっこうプログラムの要素が濃く、 
すでにコミュニティがいろいろと存在しているので、近くにあるならば参加してみたいですね
&nbsp;
<h2>ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</h3>
<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>
イベントツールのサイトですが、 
どちらかというと交流会要素が強いものが開催されているかなと思います。
&nbsp;
<a href="http://everevo.com/" target="_blank">ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</a>
&nbsp;
<h2>イベント集客 告知 | 集客ならイベントアテンド</h3>
<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>
あらゆるタイプのイベントを集客するサイトなので、IT系はそこまで多くありません。
&nbsp;
<a href="http://atnd.org/" target="_blank">イベント集客 告知 | 集客ならイベントアテンド</a>
&nbsp;
<h2>CSS Nite公式サイト</h3>
<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>
&nbsp;
言わずと知れたcss nite で説明するまでもないと思いますが、 
web系を学ぶための集まりとしてはうってつけで暇があればぜひ参加したいものばかり開催されています。
&nbsp;
<a href="http://cssnite.jp/" target="_blank">CSS Nite公式サイト &#8211; 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント</a>
&nbsp;
僕的には、もっとデザインよりのイベント・勉強会があればいいな〜と思っています。
参加できるときは参加して、もっと成長したいと思います！

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

最近、コーディング案件が多く、 
せっせとやらせてもらっているのですが、 
コーディングの際、意外と手間取るのが、 
画像のスライス、かつ画像の命名です。
画像の命名については 
どういう名前にしようか、 
少し手が止まったりしちゃう時もあります。
一応自分の中でルールを決めつつやるのですが、 
なんだかんだで曖昧になって統一されてないものになっちゃいます。
ですので、今後画像命名をスムーズにするため、 
命名ルールを決めたいと思います。
<h2>命名ルールを決めるメリット</h3>
メリットとしては、 
１．画像切り出しがちょっと早くなるかも 
 ２．後々画像が増えた場合も悩まなくて済む 
 ３．画像ファイルを探しやすくなる 
 ４．動的に出力する際に便利かも
と言った感じでしょうか。
画像の命名ルールに関しては、 
WebDesigning2013/4号 
にコーディングガイドラインについての記事がありましたので、 
それを思いっきり参考にさせてもらいます。
まずは、下のイメージが、基本的なルールです。
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-2254" alt="file_rule" src="/uploads-archive/2013/05/file_rule.png" width="656" height="300" srcset="/uploads-archive/2013/05/file_rule.png 656w, /uploads-archive/2013/05/file_rule-300x137.png 300w, /uploads-archive/2013/05/file_rule-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /> 
例：btn_top01.jpg
識別名の一覧は以下になります。
<table>
<tbody>
<tr>
<th>識別名</th>
<th>用途</th>
<th>命名サンプル</th>
</tr>
<tr>
<td>bg</td>
<td>背景や、ボーダ用にリピートされて使われる画像</td>
<td>bg_top01.jpg 
bg_dotx01.jpg 
bg_dotx_3x1.jpg</td>
</tr>
<tr>
<td>btn</td>
<td>ボタンとして使われる画像</td>
<td>btn_contact01.jpg 
btn_contact01_on.jpg</td>
</tr>
<tr>
<td>ico</td>
<td>アイコンとして使われる画像</td>
<td>ico_arrow01.jpg 
ico_square01.jpg</td>
</tr>
<tr>
<td>bnr</td>
<td>バナーとして使われる画像</td>
<td>bdr_top01.jpg 
bnr_side01.jpg</td>
</tr>
<tr>
<td>h1-h6</td>
<td>h1タグなどの論理タグで囲まれる見出し画像</td>
<td>h2_business01.jpg 
h3_service01.jpg</td>
</tr>
<tr>
<td>tit</td>
<td>h1-h6等に用途が限られない見出し画像</td>
<td>tit_blog01.jpg 
tit_news01.jpg</td>
</tr>
<tr>
<td>txt</td>
<td>デザイン上、画像化するテキストの画像</td>
<td>txt_blog01.jpg 
txt_news01.jpg</td>
</tr>
<tr>
<td>pic</td>
<td>商品や人物、風景などの写真画像</td>
<td>pic_blog01.jpg 
pic_news01.jpg</td>
</tr>
<tr>
<td>thumb</td>
<td>写真と連動するサムネイル(小さい)画像</td>
<td>thumb_blog01.jpg 
thumb_news01.jpg</td>
</tr>
<tr>
<td>img</td>
<td>写真以外のイラストや図表などの画像</td>
<td>img_blog01.jpg 
img_news01.jpg</td>
</tr>
<tr>
<td>mainimg</td>
<td>ページのメイン画像</td>
<td>mainimg_top.jpg 
mainimg_news.jpg</td>
</tr>
</tbody>
</table>
識別名はこれだけではなく、いろいろまた追加もあると思います。
とりあえず、このルール上で今後、 
やって行きたいと思います。
これが載っている雑誌はこちらです。
<iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&amp;bc1=FFFFFF&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;ref=qf_sp_asin_til&amp;asins=B00BPBUZU8" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

コーディングの際の画像ファイルの命名ルールについて

フラットデザインとは、最近の流行りで、 
無駄を省いた、シンプルな質感でしばらくは今後のデザイントレンドになると考えられるものです。 
ミニマルな感じで僕は非常に好きなタイプなのですが、 
このデザインでキーとなるのが、 
「タイポグラフィ、写真、アイコン、配色」 
で、特に重要なのがタイポグラフィなので、 
日本語を使うサイトでは、英語圏のサイトに比べるとちと難易度が高いのが悩ましい所。。。
まぁそんなことをいってもしかたがないので、 
実際制作するにあたり、役に立つサイト等をお伝えします。
&nbsp;
まずは、他のサイトのフラットデザインはどんなもんかと調べるためのサイトをご紹介。 
<a href="http://fltdsgn.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2043" alt="Flat UI Design - A showcase of the best examples of the flat UI design aesthetic on the web." src="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg" width="601" height="334" srcset="/uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web..jpg 1167w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-300x167.jpg 300w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-768x427.jpg 768w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-228x127.jpg 228w, /uploads-archive/2013/05/Flat-UI-Design-A-showcase-of-the-best-examples-of-the-flat-UI-design-aesthetic-on-the-web.-1024x569.jpg 1024w" sizes="(max-width: 601px) 100vw, 601px" /></a>
<a href="http://fltdsgn.com/" target="_blank">Flat UI Design &#8211; A showcase of the best examples of the flat UI design aesthetic on the web.</a>
&nbsp;
次に、フラットデザインで配色するための色を手っ取り早く知るためのサイト
<a href="http://flatuicolors.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2046" alt="Flat UI Colors" src="/uploads-archive/2013/05/Flat-UI-Colors.jpg" width="600" height="329" srcset="/uploads-archive/2013/05/Flat-UI-Colors.jpg 1182w, /uploads-archive/2013/05/Flat-UI-Colors-300x165.jpg 300w, /uploads-archive/2013/05/Flat-UI-Colors-768x422.jpg 768w, /uploads-archive/2013/05/Flat-UI-Colors-1024x562.jpg 1024w, /uploads-archive/2013/05/Flat-UI-Colors-228x125.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://flatuicolors.com/" target="_blank">Flat UI Colors</a>
&nbsp;
そして、フラットデザインに使えるアイコンの紹介。
こちらは先日書いた以下のブログをご覧ください！ 
<a href="/designer/%E5%95%86%E7%94%A8%E7%84%A1%E6%96%99%EF%BC%81%E6%B5%81%E8%A1%8C%E3%82%8A%E3%81%AE%E3%83%95%E3%83%A9%E3%83%83%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%B4%E3%81%A3%E3%81%9F%E3%82%8A.html" target="_blank">商用無料！流行りのフラットデザインにぴったりなアイコン4セット</a>
&nbsp;
最後は、実際にデザインしてあるパーツ等をPSDでダウンロード出来る素材のご紹介です。
縦長すぎるので、画像は省力しますが、 
この２つは手元に置いておきたい素材です。 
色味の参考にしてもよし、そのまま使ってもよしな非常にありがたい品です。
<a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI</a>
<a href="http://designmodo.com/square-free/" target="_blank">Square UI Free &#8211; User Interface Kit &#8211; Designmodo</a> 
こちらはツイッターでつぶやくとダウンロード出来るようになります。
&nbsp;
最後にあまり関係ないですが、 
webサイトで使用している色を教えてくれるサイトのご紹介です。 
urlを入れるだけで、そのサイトが実際に使っている色を割合も含めて表示してくれます。
<a href="/uploads-archive/2013/05/Colours.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2054" alt="Colours" src="/uploads-archive/2013/05/Colours.jpg" width="600" height="333" srcset="/uploads-archive/2013/05/Colours.jpg 1167w, /uploads-archive/2013/05/Colours-300x167.jpg 300w, /uploads-archive/2013/05/Colours-768x427.jpg 768w, /uploads-archive/2013/05/Colours-228x127.jpg 228w, /uploads-archive/2013/05/Colours-1024x569.jpg 1024w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://webcolourdata.com/">Colours</a>

フラットデザインの制作に役立つあれこれ

今流行りつつあるwebデザインで、フラットデザインやらソリッドカラー等といわれていますが、 
それに適したアイコンが商用無料で配布されております。
質も申し分ないうえに量もそれなりに多いので、これさえあれば十分対応できるのではないかと思います。
イラストやアイコンをかけない僕みたいな人には、ありがたすぎますね〜
それでは以下をご覧ください。
<a href="http://www.graphicsfuel.com/2013/04/20-flat-icons-psd/#data" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2003" alt="flat1" src="/uploads-archive/2013/04/flat1.png" width="550" height="275" srcset="/uploads-archive/2013/04/flat1.png 600w, /uploads-archive/2013/04/flat1-300x150.png 300w, /uploads-archive/2013/04/flat1-228x114.png 228w" sizes="(max-width: 550px) 100vw, 550px" /></a> 
<a title="Permanent Link: 20 Flat Icons (PSD)" href="http://www.graphicsfuel.com/2013/04/20-flat-icons-psd/" target="_blank">20 Flat Icons (PSD)</a>
&nbsp;
<a href="http://www.icojam.com/blog/?p=380" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2004" alt="flat2" src="/uploads-archive/2013/04/flat2.jpg" width="540" height="379" srcset="/uploads-archive/2013/04/flat2.jpg 540w, /uploads-archive/2013/04/flat2-300x211.jpg 300w, /uploads-archive/2013/04/flat2-228x160.jpg 228w" sizes="(max-width: 540px) 100vw, 540px" /></a> 
<a href="http://www.icojam.com/blog/?p=380" target="_blank">Eldorado mini free | Icojam</a> 
こちらはなんと1262個ものアイコンがあります！ 
（カラーついてますが、全部モノクロのアイコンになります。pngファイルでどうやって色つけるんだろう。。。）
&nbsp;
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2005" alt="flat3" src="/uploads-archive/2013/04/flat3.jpg" width="500" height="500" srcset="/uploads-archive/2013/04/flat3.jpg 960w, /uploads-archive/2013/04/flat3-768x768.jpg 768w, /uploads-archive/2013/04/flat3-150x150.jpg 150w, /uploads-archive/2013/04/flat3-300x300.jpg 300w, /uploads-archive/2013/04/flat3-228x228.jpg 228w, /uploads-archive/2013/04/flat3-120x120.jpg 120w" sizes="(max-width: 500px) 100vw, 500px" /></a> 
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol1" target="_blank">Flat Design Icons Set Vol1 | Media Icons | Pixeden</a>
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2006" alt="flat4" src="/uploads-archive/2013/04/flat4.jpg" width="500" height="500" srcset="/uploads-archive/2013/04/flat4.jpg 960w, /uploads-archive/2013/04/flat4-768x768.jpg 768w, /uploads-archive/2013/04/flat4-150x150.jpg 150w, /uploads-archive/2013/04/flat4-300x300.jpg 300w, /uploads-archive/2013/04/flat4-228x228.jpg 228w, /uploads-archive/2013/04/flat4-120x120.jpg 120w" sizes="(max-width: 500px) 100vw, 500px" /></a> 
<a href="http://www.pixeden.com/media-icons/flat-design-icons-set-vol2" target="_blank">Flat Design Icons Set Vol2 | Media Icons | Pixeden</a>
&nbsp;
この２つに関しては、フラットなんですが、多色で作りこんでいますね〜
&nbsp;
このようなアイコンは、見てみると作れそうな気がしますが、 
実際作るとなると、けっこう難しそうですね、、、
こんなアイコンを自分で作れるようになると、ある意味楽なんですが、 
それはまだ先の話ですね〜

商用無料！流行りのフラットデザインにぴったりなアイコン4セット

インフォグラフィックのリンク集をご紹介します。
インフォグラフィックとは、 
情報、データ、知識を視覚的に表現したもので、見る側にとって、目に止まりやすく。感覚的に理解しやすいものです。 
イラストを使用したり、キレイにレイアウトしたり、方法は様々ありますが、 
伝えたい情報をわかりやすく素早く伝えたい場合、有効な手段になります。
チラシやパンフレット等では、当然のごとく使用されていますが、 
webサイトでは、LPではよくあるかもしれませんが、普通のサイトでは、そこまで見かけないかなぁと思います。
当然、今後必要とされる要素ではありますが、この領域はもうwebデザインではなく、 
エディトリアルデザインなので、僕自身得意ではない分野ではありますが、 
以下に紹介させて頂くサイトを参考に勉強していきたいと思います。
それでは、インフォグラフィックをまとめているサイトを紹介します。 
最初の２つは、日本のサイトですね。
&nbsp;
<h3>infogra.me（インフォグラミー）</h4>
&nbsp;
<a href="http://infogra.me/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1929 aligncenter" alt="info1" src="/uploads-archive/2013/04/info1.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info1.jpg 1089w, /uploads-archive/2013/04/info1-300x185.jpg 300w, /uploads-archive/2013/04/info1-768x473.jpg 768w, /uploads-archive/2013/04/info1-1024x630.jpg 1024w, /uploads-archive/2013/04/info1-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://infogra.me/" target="_blank">infogra.me（インフォグラミー） | インフォグラフィックスコミュニケーションサービス</a>
&nbsp;
<h3>infographic.jp</h4>
&nbsp;
<a href="http://infographic.jp/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-1931 aligncenter" alt="info2" src="/uploads-archive/2013/04/info2.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info2.jpg 1089w, /uploads-archive/2013/04/info2-300x185.jpg 300w, /uploads-archive/2013/04/info2-768x473.jpg 768w, /uploads-archive/2013/04/info2-1024x630.jpg 1024w, /uploads-archive/2013/04/info2-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a> 
<a href="http://infographic.jp/" target="_blank">infographic.jp &#8211; インフォグラフィックス by IOIX</a>
&nbsp;
<h3>Visual.ly</h4>
&nbsp;
<a href="http://visual.ly/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1932 aligncenter" alt="info3" src="/uploads-archive/2013/04/info3.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info3.jpg 1089w, /uploads-archive/2013/04/info3-300x185.jpg 300w, /uploads-archive/2013/04/info3-768x473.jpg 768w, /uploads-archive/2013/04/info3-1024x630.jpg 1024w, /uploads-archive/2013/04/info3-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://visual.ly/" target="_blank">Infographics &amp; Data Visualization | Visual.ly</a>
&nbsp;
<h3>Daily Infographic</h4>
&nbsp;
<a href="http://dailyinfographic.com/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1933 aligncenter" alt="info4" src="/uploads-archive/2013/04/info4.jpg" width="601" height="361" srcset="/uploads-archive/2013/04/info4.jpg 1089w, /uploads-archive/2013/04/info4-768x462.jpg 768w, /uploads-archive/2013/04/info4-1024x616.jpg 1024w, /uploads-archive/2013/04/info4-300x180.jpg 300w, /uploads-archive/2013/04/info4-228x137.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a>
<a href="http://dailyinfographic.com/" target="_blank">Daily Infographic | A New Infographic Every Day | Data Visualization, Information Design and Infographics</a>
&nbsp;
<h3>Infographics Showcase</h4>
&nbsp;
<a href="http://www.infographicsshowcase.com/" target="_blank"><img decoding="async" loading="lazy" class=" wp-image-1934 aligncenter" alt="info5" src="/uploads-archive/2013/04/info5.jpg" width="600" height="369" srcset="/uploads-archive/2013/04/info5.jpg 1089w, /uploads-archive/2013/04/info5-300x185.jpg 300w, /uploads-archive/2013/04/info5-768x473.jpg 768w, /uploads-archive/2013/04/info5-1024x630.jpg 1024w, /uploads-archive/2013/04/info5-228x140.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
<a href="http://www.infographicsshowcase.com/" target="_blank">Infographics Showcase &#8211; Infographic Reviews &#8211; Submit Infographic</a>
&nbsp;
&nbsp;
素晴らしいインフォグラフィックがいっぱいですね！
作成するのがすごい大変そうですが、 
簡単に作成できるツールがあるそうです。 
それは以下のリンクからご覧ください。
<a href="http://bazubu.com/infographictools-6427.html" target="_blank">驚くほど簡単にインフォグラフィックを作成できる無料ツール７選</a>
まだ試してはいないんですが、簡単にできてしまうと、 
我々の仕事の価値もなくなってしまうようで複雑です。。。

ページの印象をUPさせるインフォグラフィックのリンク集サイト５つ

web制作において、ワイヤーフレームを書くことはほぼ必須になってはいますが、 
みなさん何を使って制作しているのでしょうか？？
僕はなぜかその時々によって違いますが、手書きやPSDでやります。 
ツールはいまいちな感じだったんですが、最近のはよくできているのが多いので、 
その中でも無料で使用できるものをご紹介します。
&nbsp;
<h2>ワイヤーフレーム作成の無料ツール</h3>
&nbsp;
<h3>moqups</h4>
<a href="https://moqups.com/#!/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire01.jpg" width="500" /></a>
・アカウント登録なしで使用できる（画像UPするのにアカウントが必要） 
・制限も特になし 
・ページ遷移の設定ができる
&nbsp;
<h3>cacoo</h4>
<a href="https://cacoo.com/lang/ja/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire02.jpg" width="500" /></a>
・オンラインで作成 
・アカウント作成の必要あり 
・フリー(機能限定)25枚、エクスポート機能３回まで 
・chromeの拡張機能でも使える 
・日本製
&nbsp;
<h3>wireframe.cc</h4>
<a href="http://wireframe.cc/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire03.jpg" width="500" /></a>
・アカウント登録なしで使用できる 
・URLを共有できる 
・スマホバージョンにもできる
&nbsp;
<h3>Justinmind</h4>
<a href="http://www.justinmind.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire04.jpg" width="500" /></a>
・ダウンロードしてローカルで使用(windows,mac) 
・スマホバージョンにもできる 
・PDF、画像書き出し 
・枚数制限なし
&nbsp;
<h3>google drive図形描画</h4>
・アカウント必要あり 
・日本語対応 
・wireframe専用ではない
&nbsp;
といった５つになります。 
僕的には、moqups、Justinmindがいいのではないかと思っています。 
moqupsのページの遷移ができるってのはかなり良いポイントですね！
&nbsp;
そして、 
こういうツールを使うのではなく、 
手書きの方がいい！っていう方のために、 
手書き用のテンプレートもご紹介します。 
もちろん、すべてフリーです。
&nbsp;
<h2>手書き用テンプレートPDF</h3>
&nbsp;
<h3>paper browser</h4>
<a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire05.jpg" width="500" /></a>
いくつか種類があるので、お好みのをダウンロードできます。
<a href="http://www.raincreativelab.com/paperbrowser/#download-templates" target="_blank">ダウンロードページ</a>
&nbsp;
<h3>ZURB Grid Paper</h4>
<a href="http://www.zurb.com/playground/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire06.jpg" width="500" /></a>
他にも様々なテンプレートがあります。
<a href="http://www.zurb.com/playground/playground/tools/ZURB-Grid-Paper.zip" target="_blank">ダウンロード</a>
&nbsp;
<h3>Web Sketching Template</h4>
<a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire07.jpg" width="500" /></a>
<a href="http://www.flickr.com/photos/88005207@N00/3884016462/" target="_blank">ダウンロードページ</a>
&nbsp;
<h3>sneakpeekit</h4>
<a href="http://sneakpeekit.com/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire08.jpg" width="500" /></a>
ここは、webサイトだけでなく、ipadやiphone用等もあります。
<a href="http://sneakpeekit.com/wireframe-sketchsheets/" target="_blank">ダウンロードページ</a>
&nbsp;
<h3>paperkit</h4>
<a href="http://paperkit.net/" target="_blank"><img decoding="async" class="aligncenter" alt="" src="/demo/abe/images/wire09.jpg" width="500" /></a>
こちらはワイヤーフレームというわけではなく、 
方眼紙を自由なサイズにして、ダウンロードできるものです。
<a href="http://paperkit.net/" target="_blank">paperkit</a>
&nbsp;
以上となります。
&nbsp;
&nbsp;
大変便利ですね〜、こういうツールは本当にありがたい。

ワイヤーフレーム作成に無料で使えるツール5選、手書き用テンプレートPDFも紹介

世の中便利になったもので、 
非常にありがたいものが無料で見ることができます。
日々いろんな情報を取得していく中で、 
最近(けっこう前でもある)タメになったものをご紹介します！
<h2>デザイン</h3>
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/11608357" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/shirokuro331/web-11608357" title="Webデザインのセオリーを学ぼう" target="_blank">Webデザインのセオリーを学ぼう</a> from <a href="http://www.slideshare.net/shirokuro331" target="_blank">Toshiaki Sasaki</a> </div>
非常に丁寧でわかりやすく書かれています。 
デザインは論理的ですね！
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/14902681" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/saucerjp/ss-14902681" title="ノンデザイナーのための配色理論" target="_blank">ノンデザイナーのための配色理論</a> from <a href="http://www.slideshare.net/saucerjp" target="_blank">tsukasa obara</a> </div>
なるほどなるほど・・・それでも配色は難しい・・・
<h2>ディレクション</h3>
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442293" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/cafekenta/20121117-01-dirmtg01" title="20121117 01 dir-mtgスライド01" target="_blank">20121117 01 dir-mtgスライド01</a> from <a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a> </div>
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442318" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/cafekenta/20121125-02-dirmtg02" title="20121125 02 dir-mtgスライド02" target="_blank">20121125 02 dir-mtgスライド02</a> from <a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a> </div>
まさしくディレクションとはこのことだと思います。 
もっとこれを多く実践してくれる人が増えたらいいのにと思います。
<h2>その他</h3>
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/7665168" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/hayatomizuno/jquery-7665168" title="ノンプログラマーのためのjQuery入門" target="_blank">ノンプログラマーのためのjQuery入門</a> from <a href="http://www.slideshare.net/hayatomizuno" target="_blank">Hayato Mizuno</a> </div>
初心者向けですね。枚数は多いですが、サクサク読み進められるので、時間はあまりかからないと思います。
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15002576" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/nukaga/webwordpress-15002576" title="文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう" target="_blank">文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう</a> from <a href="http://www.slideshare.net/nukaga" target="_blank">Junko Nukaga</a> </div>
これも初心者向けですね。概念から方法までわかりやすく見やすいものになってます。
<iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/16459192" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> 
<div style="margin-bottom:5px"> <a href="http://www.slideshare.net/copywritter/ss-16459192" title="カヤックコピー部のコピー講座" target="_blank">カヤックコピー部のコピー講座</a> from <a href="http://www.slideshare.net/copywritter" target="_blank">長谷川 哲士</a> </div>
これは、もうなるほどと思ってしまう内容で、とても参考になります。
こういうスライドは本当にありがたく勉強になります。 
僕も何か書いてみようかな。。。

web制作においてタメになる(なった)スライドのご紹介

webサイトの制作しているときに、毎回ではないんですが、
時々利用する便利なサイトをご紹介します。
&nbsp;
地味に役立つのでブックマークおすすめです！
&nbsp;
<h3>Metallic Ratio</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service01.jpg" alt="" width="656" />
&nbsp;
レイアウト等のバランスを決める時なんかに重宝します。
いわゆる黄金比、白銀比、はたまた、青銅比を、 いろいろなパターンで、教えてくれます。
簡単な図もありますので、視覚的にもわかりやすいです。
&nbsp;
<a href="http://ratio.b-shiki.com/" target="_blank">Metallic Ratio</a>
&nbsp;
<h3>PXtoEM.com</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service02.jpg" alt="" width="656" />
&nbsp;
主にフォントサイズですが、サイト制作にあたっていろんな単位で指定できますが、
単位毎で、大きさがわからないこともあります。
&nbsp;
それをわかりやすく表にしてくれています。
記入すると、変換してくれるフォームあるので便利です。
&nbsp;
<a href="http://pxtoem.com/" target="_blank">PXtoEM.com</a>
&nbsp;
<h3>css3clickchart</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service03.jpg" alt="" width="656" />
&nbsp;
CSS3のコードって長く、ちょっと複雑になったので、いちいち覚えていられません。。。
そんな時に、このCSS3のコードを教えてくれるサイトが便利です。(英語ですが)
&nbsp;
大きなページ遷移がなく、一画面で、
コード、デモ、サポートブラウザ等が表示されているので、
ありがたいサイトです。
&nbsp;
<a href="http://css3clickchart.com/" target="_blank">css3clickchart</a>
&nbsp;
<h3>j-snippet</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service04.jpg" alt="" width="656" />
&nbsp;
jQueryのプラグインを紹介しているサイトです。
プラグインないかな?って探す時に便利です。
カテゴリ別に分かれているので、検索も割りとしやすいです。
&nbsp;
<a href="http://jquery.kachibito.net/" target="_blank">j-snippet</a>
&nbsp;
<h3>WP code-snippet</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service05.jpg" alt="" width="656" />
&nbsp;
wordpressのコードのスニペットです。
日本語なのでわかりやすいです！
一覧しかないように見えて、
特徴やタグで検索できるので、
まずはこちらで探してみると見つかるかもしれません。
&nbsp;
<a href="http://kachibito.net/wp-code" target="_blank">WP code-snippet</a>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #web制作サポート

2013/07/17

2013/07/03

2013/06/25

2013/06/19

2013/05/22

2013/05/02

2013/04/24

2013/04/17

2013/03/13

2013/02/28

2012/10/04