レスポンシブデザインでPCとスマホで画像を切替える方法

jQueryで順番にアニメーションする方法を考える

jQueryで簡単なloading画面を作る

joomlaの管理画面を日本語化する方法を説明いたします。
特に難しいことはなく、流れに沿っていけばできるかと思います。
&nbsp;
joomlaをインストールされている前提でお話させて頂きます。
&nbsp;
<h3>１．まずは、日本語化のファイルをダウンロードします。</h4>
記事を書いた時点での最新はこちらになります。
<a href="http://joomla.jp/news/release-news/213-release-joomla-314.html">Joomla 3.1.4 リリース &#8211; Joomla! JAPAN</a>
日本語とパックになったものがありますね。
&nbsp;
<h3>２．管理画面のExtensions &gt; Extension Manager をクリック</h4>
<a href="/uploads-archive/2013/07/Extension-manager.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2789" alt="Extension-manager" src="/uploads-archive/2013/07/Extension-manager-1024x541.jpg" width="614" height="325" /></a>
&nbsp;
<h3>３．インストール画面からUpload Package File選択をクリックし、ダウンロードしたファイルをアップロード</h4>
&nbsp;
<a href="/uploads-archive/2013/07/Extension-manager-Install.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2790" alt="Extension manager - Install" src="/uploads-archive/2013/07/Extension-manager-Install-1024x592.jpg" width="614" height="355" /></a>
アップロードが完了したら次の工程に進みます。
&nbsp;
<h3>４．Extensions→Language Managerをクリックし、遷移したら、左にあるメニューの「Installed &#8211;  Administrator」をクリック</h4>
以下のページが表示されます。
<a href="/uploads-archive/2013/07/test-Administration-Language-Manager-Installed-Languages.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2791" alt="test - Administration - Language Manager- Installed Languages" src="/uploads-archive/2013/07/test-Administration-Language-Manager-Installed-Languages-1024x592.jpg" width="614" height="355" /></a>
&nbsp;
<h3>５．Defaltの☆マークの箇所をクリックすれば完了です！</h4>
<a href="/uploads-archive/2013/07/de0f0a3fc290761cafc1aff806831640.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2792" alt="test - 管理 - コントロールパネル" src="/uploads-archive/2013/07/de0f0a3fc290761cafc1aff806831640-1024x597.jpg" width="614" height="358" /></a>
無事日本語化しました！！
&nbsp;
日本語化できたのですが、やはり項目が多く、まだどういじったらいいかよくわからない状況です笑
実際になにかサイトを作ってみるようなことをしないとわからないかもしれませんね。。。
&nbsp;
&nbsp;
&nbsp;

joomlaの管理画面を日本語化する方法

WebGLのJSライブラリー「Three.js」を使ってみた

ぜひ見本にしたいサイトを30サイトまとめてくれております。
海外のサイトですと、やはりミニマル・フラットデザインは良い感じですよね〜
ちまたで少し言われているみたいで、僕もそうだと思うのですが、 
やはり日本語のフォントだとかっこ良くならないんですよねなぜか。
ただ、参考にして勉強させて頂きます！
<a href="http://designinstruct.com/visual-inspiration/web-design-inspiration/minimalist-web-designs/">30 Beautiful Minimalist Web Designs</a>
<a href="/uploads-archive/2013/07/30-Beautiful-Minimalist.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2753" alt="30-Beautiful-Minimalist" src="/uploads-archive/2013/07/30-Beautiful-Minimalist.jpg" width="621" height="12528" srcset="/uploads-archive/2013/07/30-Beautiful-Minimalist.jpg 690w, /uploads-archive/2013/07/30-Beautiful-Minimalist-228x4600.jpg 228w" sizes="(max-width: 621px) 100vw, 621px" /></a>

ぜひ見本したい！美しいミニマル・フラットデザインのwebサイト30個

以前WebGLの動作環境についてご紹介いたしましたが（<a href="/designer/webgl%E3%81%AE%E5%8B%95%E4%BD%9C%E7%92%B0%E5%A2%83%E3%81%BE%E3%81%A8%E3%82%81.html">こちら</a>）、
こちらで、WebGLはグラフィックボードによってはブラウザが最新でも使うことができないという風にご紹介しておりました。
しかしながら、最近のChromeでは、グラフィックボードが古くても、ブラウザ側で環境を再現(エミュレーション)することができるので、WebGLのサイトを見ることができることがわかりました。
&nbsp;
少しうれしくなったので、WebGLを使ったサイトや、デモを集め些細とを探してみましたので、少しご紹介いたします。
&nbsp;
<a href="https://www.cubeslam.com/" target="_blank"><img decoding="async" loading="lazy" style="vertical-align: text-top;" alt="CUBE SLAM" src="/uploads-archive/2013/07/image01.jpg" width="640" height="455" /></a> 
<a href="https://www.cubeslam.com/" target="_blank">CUBE SLAM</a>
動物のそれぞれの動きがすごいです。
&nbsp;
&nbsp;
<a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank"><img decoding="async" loading="lazy" alt="WebGL DEMO" src="/uploads-archive/2013/07/image03.jpg" width="640" height="455" /></a>
<a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank">mozilla Demo Studio WEB GL</a>
WebGLのデモ集です。いろんなタイプのWebGLのサンプルを見ることができます。
&nbsp;
&nbsp;
<a href="http://yomotsu.github.io/threejs-examples/" target="_blank"><img decoding="async" loading="lazy" alt="three.js" src="/uploads-archive/2013/07/image02.jpg" width="640" height="455" /></a>
<a href="http://yomotsu.github.io/threejs-examples/" target="_blank">Examples created by Yomotsu useing THREE.js</a>
three.jsという、WebGLを使いやすくするライブラリを使ったデモ集です。
いきなりコアなWebGLを扱うのは敷居が高い感じがしますが、こういったライブラリを使ってはじめるのもいいと思いました。
&nbsp;

webGLの3Dをつかったサイトやデモサイト

今やwebサイトの構築には、欠かせないといっても過言ではないCMS。
普通のwebサイト制作だと、ほぼCMSを使うことになるのですが、
CMSを使うのと、使わないとなると、全然勝手が違います。
特に完成した後の運用面での修正等がグッと楽になります。
&nbsp;
基本弊社では、Movable TypeかWordpressを利用して制作します。
しかし、昨年ぐらいからはほとんどWordpressで作ることのほうが多くなり、
Movable Typeで作る場合は、今までMovable Typeを使っていたというパターンです。
&nbsp;
僕自身はどちらでも構築できるのですが、
今ではWordpressの方がやりやすいと感じています。
というか最近MovableTypeの案件が少なく、忘れかけているというのもあります笑
&nbsp;
CMSについてですが、僕はその２つしか扱えないし、その２つしか知りませんでした。
最近、他にもCMSがあることを知り、軽く意識していたら、
以下の記事を発見しました。
&nbsp;
<a href="http://awoni.net/blog/2012/11/983#.UdvLt1P04_c">CMS の日本でのシェアは WordPress が一人勝ちになっている件 &#8211; Webサービス作成日記</a>
&nbsp;
やはり、世界的にもWordpressのシェアが多いとのこと。特に日本では。
そしてMovableTypeは下降気味であること、
ちょっと前にJoomlaとDrupalというCMSがあることを聞いていたので、その２つもシェアがなかなかあることを知り、
新たな発見と共に、勉強不足だなと感じました。
&nbsp;
JoomlaとDrupalの２つに関しては、実際試してみたいのですが、
まだその機会はなさそうなので、とりあえず今度特徴等を調べてみたいと思います。
その調べた結果をまた記事にしてみたいと思います。
&nbsp;
&nbsp;
&nbsp;

無料で使えるCMSについて

CSS3 + jQueryによる、グラデーションのホバー効果

こちらのサイト（→<a href="http://triand.jp/">http://triand.jp/</a>）をご覧いただきたいのですが、
こちらのサイトでは、トップページのビジュアル部分にアニメーションが使われています。
とても滑らかな動きなので、FlashかHTML5のCanvasで作られていると思ったのですが、実際にはGIFファイルでした。
GIFアニメだと独特のカクカクとした動きしかできないものだと思っていたので驚きました。
調べてみると0.03秒に1コマというとても細かい間隔で作られていました。
&nbsp;
通常Photoshopでは、0.1秒までしか設定できませんが、実はもっと細かくできるんじゃないかと思って、
いろいろ試していたところ、普通にできてしまうことがわかったので、その方法をご紹介いたします。
&nbsp;
&nbsp;
まずは「ウィンドウ」→「アニメーション」でアニメーションのフレームを表示します。
<img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img02.jpg" width="480" height="368" />
&nbsp;
つぎに、アニメーションの間隔を指定します。
<img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img01.jpg" width="480" height="368" />
&nbsp;
ドロップボックスに表示されるのは0.1秒までなのですが、
その他を選ぶことでもっと細かく指定できます。
<img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img04.jpg" width="480" height="368" />
1コマ1コマなのでかなり根気の要る作業となりますが、
ちょっとした効果をJS等を使わずに表現するとき、
役に立ちそうです。
&nbsp;

PhotoshopでFlashのような滑らかなGIFアニメを作るための裏技

うちの会社でももう一度振り返る必要もあるかもしれませんが、 
他の方々、会社さんはどのようなフローでやっているのかが気になる所です。
この流れをお客さんと共有し、 
トラブルを軽減できるようになれたら素晴らしいですね。
やはり、トラブルの元は、
「認識の違い」
が主になってくるのだと思います。
「ここはこうだと思ってた」、「これはできると思ってた」 
 「この後どう進むのか」、等々 
少しのズレが、大きくなり、重なることでトラブルが起こってしまうのではないかと思います。
それでは、記事にして頂いてる方を記載したいと思います。
&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制作の流れについてのまとめ

ブラウザ上でFlashを使わずに3Dのグラフィック描画を可能にするHTML5での新技術のWebGLですが、
動作環境が限定されているのが現状です。
&nbsp;
とはいえど、今後利用範囲が拡大していくことは確実ですので、
まずは利用できる環境を知りたいと思ったので、まとめてみました。
&nbsp;
WebGLの動作環境として特徴的なのは、
他のHTML5技術ではブラウザ環境だけが制限の要因となることが多いですが、
WebGLではグラフィックボードを利用しているため、
グラフィックボードのOpenGLへの対応状況が制限の要因となってきます。
つまり、ブラウザが最新でもPCが古い場合は利用できないこともあるということです。
※追記→最新のChromeでは、グラフィックボードが対応していなくても、ブラウザ側で再現してしまうので、
問題なく使えるようです。
&nbsp;
<h3>OpenGLの対応状況</h4>
<table>
<tbody>
<tr>
<th>OpenGL 1.x</th>
<th>OpenGL 2.x</th>
<th>OpenGL 3.x</th>
<th>OpenGl ES 2.0</th>
<th>OpenGl ES 3.0</th>
</tr>
<tr>
<td style="text-align: center;">×</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
</tr>
</tbody>
</table>
○：対応　△：ブラウザの設定変更が必要　×：非対応
&nbsp;
<h3>PCブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th>Firefox 4 以降</th>
<th>Chrome 9 以降</th>
<th>Safari 5.1以降</th>
<th>Opera 12以降</th>
<th>IE 11以降</th>
</tr>
<tr>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">○になりそう</td>
</tr>
</tbody>
</table>
○：対応　△：ブラウザの設定変更が必要　×：非対応
&nbsp;
<h3>スマホのブラウザの対応状況</h4>
<table>
<tbody>
<tr>
<th colspan="4">Android</th>
<th rowspan="2">iOS</th>
</tr>
<tr>
<th>Firefox for Mobile 以降</th>
<th>Opera Mobile 12 以降</th>
<th>Google Chrome for Android 25 以降</th>
<th>Android ブラウザ 以降</th>
</tr>
<tr>
<td style="text-align: center;">○(android 4以降)</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">○</td>
<td style="text-align: center;">△</td>
<td style="text-align: center;">△(iAdのみ)</td>
</tr>
</tbody>
</table>
○：対応　△：ブラウザの設定変更が必要　×：非対応
&nbsp;
スマホの場合、「Enable WebGL」というアプリをスマホに導入することで、
非対応のブラウザでもWebGLを利用可能になるようです。
&nbsp;
ユーザーがWebGLを有効にすれば利用可能になるブラウザも多くあるので、
クッキーの説明のように、WebGLについての設定を載せるなどして、
作る側が利用拡大を模索していくことも、WebGLの普及には重要かもしれません。
&nbsp;
&nbsp;

WebGLの動作環境まとめ

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サービス

Web上ではPDFファイルへのリンクを貼ることが度々あります。
ただその場合閲覧する側は、一度ページを離れなくてはならないだけでなく、
PDFがダウンロードされるのを待たねばならないため、あまり軽快とはよべないページになってしまいがちです。
&nbsp;
今回ご紹介するGoogle Docs Viewerは、Googleドライブを利用している方は
その中でファイルを開くときに、目にする機会も多いと思いますが、
コチラのビューアをWebページ内に設置して、
PDFなどのファイルを軽快に閲覧できるようにすることができます。
&nbsp;
今回はPDFで紹介しますが、他にも多くのドキュメントファイルの表示に対応しています。
対応しているファイル形式(<a href="https://support.google.com/drive/answer/2423485?p=docs_viewer&amp;rd=1" target="_blank">Googleドライブヘルプより</a>)
<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>
&nbsp;
↓こちらがDEMOです。
<a class="demo" href="/demo/ninomiya/22/" target="_blank">DEMO</a>
&nbsp;
<h2>設置の仕方</h3>
<h3>1.Googleドキュメントビューアのページを開きます。</h4>
URL：
<a href="https://docs.google.com/viewer" target="_blank">https://docs.google.com/viewer</a>
&nbsp;
<h3>2.表示させるPDFファイル(または表示に対応している他の形式のファイル)のURLを入力し、HTMLタグを生成します。</h4>
<img decoding="async" loading="lazy" alt="ファイルのURL入力" src="/uploads-archive/2013/06/ggl_dv01.jpg" width="656" height="438" />
&nbsp;
<h3>3.生成したHTMLタグをWebページの表示させたい場所にコピー&amp;ペーストすれば、完了です。</h4>
<img decoding="async" loading="lazy" alt="HTMLタグ生成" src="/uploads-archive/2013/06/ggl_dv02.jpg" width="656" height="611" />
&nbsp;
※注意点
テスト環境などで、Basic認証などのアクセス制限がかかっていると、ビューアがPDFにアクセスできないため、
表示することができませんので、ご注意ください。
&nbsp;
Googleドキュメントビューアのサイトに毎回アクセスしてHTMLタグを生成しなくても、下の「ファイルのURL」のところに表示したいURLを入力すれば、Webページ内での表示が可能です。

		<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;">
			<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>XHTML</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">&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;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

ただ、こちらのURLは普通のURLではなく、URLエンコード形式にする必要があります。
静的なサイトの場合はコチラのサイト（<a href="http://www.tagindex.com/tool/url.html">http://www.tagindex.com/tool/url.html</a>）などでエンコードして利用することができます。
PHPなど動的なサイトの場合は、「 urlencode ([ファイルのURL])」などの関数を使って、
利用することができます。
&nbsp;
現時点での欠点としては、<a href="/demo/ninomiya/22/" target="_blank">DEMO</a>で見ていただけると分かりますが、
写真などのラスター形式の画像は、画質が著しく劣化します。
画質を重視する場合は、あまりオススメできません。
&nbsp;
その分表示速度はとても速く、ファイルも軽いので、
軽快にPDFを表示したい場合にはとてもオススメです。
&nbsp;
&nbsp;
&nbsp;

nino_eye130612.jpg

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

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

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

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

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2013/08/07

2013/08/07

2013/07/31

2013/07/31

2013/07/24

2013/07/24

2013/07/17

2013/07/10

2013/07/10

2013/07/03

2013/07/03

2013/06/26

2013/06/25

2013/06/19

2013/06/13

2013/06/13

2013/06/06

2013/06/06