デザイン業が誰でもできると思ってる人マジでいるの?

2016-02-02 14:27:17
こんな広告が目についた、 初心者だった私が3ヶ月でWEBデザイナーに! by ヒューマ◯アカデミー WEBデザイナーは誰もがなれる職業です by be-webdesigner.com うん。これはデザインセンスがある場合のみなので、30人におよそ1人位の割合で当てはまるかな。 ゆえに、29人は学費を払わされただけで、時間とお金を大損するということになるよね。 WEBデザイナーの定義をドーンと低くすれば、センスがゼロの人でも自称デザイナーを名乗れるけど、 それはデザイナーじゃなくて、ただサイトが作れるだけの人。間違いなく、それで飯は食っていけない。 デザイナーの分か...続きを見る
カテゴリ: 個人的主張

リファラースパムのせいでgoogle解析のPV数に誤差が出る

2015-11-23 10:27:27
最近流行の技のようで、主にロシアからのリファラースパム行為が多いらしい。 google解析(グーグルアナリティクス)でリンク元の参照を見ると、 普通なgoogleやyahooなどの検索エンジンが上位のはずが、訳の分からないドメインが上位になっている。 例えば、こんな感じのURLが参照元に… htmlStart claim66629524.copyrightclaims.org site48246457.snip.to site69510790.snip.to get-your-social-buttons.info site46176572.snip.to htmlEnd...続きを見る

【フリー素材】スマホ用 汎用リンクマーク アイコン

2015-10-30 21:57:55
スマホサイトでボタンを作る時の汎用リンクマークを作成しました。1ピクセルのビットマップでのマークもおまけに。 1ピクセルのリンクマークはPC用サイトで、使いこなせる人は上級者かも。 個人的にはポータルサイトなどの細々したサイトで重宝してます。リストタグに背景指定で使って見て下さい。 ダウンロード[PNG] ダウンロード[PSD] ...続きを見る
カテゴリ: WEB素材

DVD及びブルーレイ(Blu-ray)をMP4に変換する方法

2014-11-03 20:39:01
DVDfabでDVD(及びブルーレイ)をMP4にする方法を紹介したいと思います。MP4にしてしまえば、youtubeにアップできるのでどこでも見れるようになるので便利。 今回の例は「海外ドラマで2話が入っている」ケースでの設定で字幕もMP4の映像に入れ込むようにしている。 まず、「リッピング」のメニューをクリックし、チェックボックスでMP4に変換したいところ選択。ドラマなので、同じオープニングが毎回しつこくなってしまうので、チャプターを2-7にしてますが、通常は変更する必要はありません。 次はエンコードの種類を選択。2014年の現在は「MP4」、「WMV」が主流で、今...続きを見る

【フリー素材】バナー、チラシ作成でよく使うギザギザのマーク

2014-11-01 14:52:29
ギザギザと個人的に呼んでいるマーク。「何パーセントオフと」か、「何々限定」とか、強調させたい時に使用するもので、Photoshopには最初からそれっぽいのが入っているものの、なんかちょっとイマイチってことで、イラレで作成しました。色はカラーオーバーレイやグラデーションで自分好みに調節して下さい。 ダウンロード[PNG] ダウンロード[EPS] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

sleipnir(スレイプニル)のお気に入りインポート・エクスポートはこうしろ!改定版

2013-09-01 03:06:10
※2014/11/06改定 この記事はスレイプニルのバージョンが4.3.10のケースなので、万能な情報ではないかもしれません スレイプニル(以下、プニル)のブックマークのインポートで悩んでるアナタ!自分も悩んだことあるけど、なんとかで解決できました! とりあえずIEにエクスポートをすることが肝要。IEにエクスポートしてしまえば、他のどんなブラウザでもIEのお気に入りをインポートできるはず!なんてったってIEはwindowsデフォルトのブラウザなのだから。 ①まずはプニルのメニューバーを表示(近年のブラウザはメニューが初期状態では非表示になっているが、これは表示しておかないと色...続きを見る

ボタンを押したらローディング画面を表示する

2013-04-30 01:36:10
管理画面で時間のかかる処理(例えば画像や動画などをアップロードする際)をする場合、画面が固まってしまったと勘違いされて閉じられたり、ボタンを何度も押されてバグを発生させてしまうこともあるかもしれない。 そこで、ローディング画面を表示して、ユーザーに「現在処理中ですよ」と知らせる必要があるのである。jQueryにローディング画像が必要のない便利な「Activity Indicator」というライブラリがあるので紹介しよう。 まずは、jQuery本体とcssを読み込む。#loadingは画面いっぱいにちょっと暗くするための箱。 htmlStart htmlEnd ...続きを見る

jqueryでtable・liなどをドラッグ&ドロップで並び替え(ソート)する

2013-04-27 20:29:37
ドラッグ&ドロップで並び替える機能はほんの数行で実現できる。まずはjqueryとjquery-uiを下記にアクセスしてダウンロードする。jqueryは自サーバに置いたほうが読み速度が早いから直リンクはオススメしない。 htmlStart http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js http://code.jquery.com/ui/1.10.2/jquery-ui.js htmlEnd 次は、下記のようにjqueryを読み込んで、一行コードを書いてやります。#sortにドラッグ&ドロップソートを適応さ...続きを見る

div全体をリンクにする方法

2012-11-28 19:24:47
divの中全体をリンクにしたい場合は下記のコードがおすすめ。リンクにしたいタグにクラス指定をすれば、そのタグ内にあるリンクのリンク範囲をボックス全体にしてくれます。 <javascript> htmlStart $(".boxlink").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); htmlEnd HTMLは下記のような感じで使用する。親ボックスは特にdivじゃないとダメということはない。block要素であればなんでもOK。 <HTML> ...続きを見る
カテゴリ: Javascript

QRコードを手っ取り早く作る方法

2012-11-02 10:06:42
Google Chart APIを利用すればたった一行でQRコードが作れます。 htmlStart http://chart.apis.google.com/chart?chs=《サイズ》&cht=qr&chl=《URLやメールアドレスなど》 htmlEnd 画像タグに上記のコードを記載するだけ。 htmlStart htmlEnd パラメータの「chl」には日本語を使うこともできます。mailtoタグと同様で日本語を使う場合は文字化けの対処をしないといけないので、文字コードをパラメータの「choe」で指定しないといけない。 QRコードは携帯やスマホで読み取られるの...続きを見る
カテゴリ: PHP

【フリー素材】スマホ版ヘッダー用素材

2012-10-25 07:44:52
今回はスマホ版サイトのヘッダーの部分でよく見かけるアイコンの素材。今回配布しているPSDファイルでは、ホームやメールなど全てがベクターなので拡大縮小が自由です。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 スマホ版サイトをデザインする時の強い味方となる参考サイトをついでにご紹介。 ■絶対見ておきたい有名企業のスマホサイトまとめ http://ascii.jp/elem/000/000/590/590502/ ■優れたiPhoneサイトデザイン集 - iPhoneデザインボックス h...続きを見る
カテゴリ: WEB素材

無線LANからコンセントLAN(PLC)に変えてみた

2012-10-23 21:06:14
ネットでの買い物といえば必ずといっていいほど楽天を利用していたが、最近はAmazon(アマゾン)で買い物をすることが多い。楽天より安いケースが多いし、最大の長所は注文から発送がかなり早く、大抵翌日に到着します。 レビューで評判の良かったパナソニック製のPLCを購入 今回も翌日で無事に到着したコンセントLAN(PLC)。無線LANは速度が遅かったので、PLCに変えてみることに。 結論、スピードは格段にアップし思惑通りにいった。しかも設定などはほぼ皆無で、設置も簡単。 ついでに「無線LAN」と「PLC」の違いについて、軽く説明しておこう。 無線LANは壁に弱いので...続きを見る

phpMyAdminでインデックスの削除をする方法

2012-10-12 01:54:01
ローカルのxampp環境でphpMyAdmin3.1.3.1を使用しているのだが、プライマリー・ユニーク・インデックスのキー操作をしようとしたが、全然操作するメニューが見当たらなかった。 と、どうやらブラウザの問題だったようで、IEではそもそもメニューが表示されていなかった。mootools.jsを使用している画面なのでIEが対応していないみたいである。...続きを見る
カテゴリ: PHP

SQL(データベース)で数値の先頭のゼロを消さない方法

2012-09-28 07:08:48
データベースに整数(数値)データを格納する際に先頭に0(ゼロ)が付いていると勝手に消されてしまいます。郵便番号はゼロから始まることがよくあるので、ゼロは必ず残さないといけません。 では早速ゼロを残す方法を記載します。下記の画像を見てください。 種別をINT型(整数型)にして、属性を「UNSIGNED ZEROFILL」にし、あとは長さを記入するだけです。 もう一つの邪道な方法としてはデータ型を整数ではなく文字列型の「varchar」にするというやり方もありますが、文字列型より整数型のほうが検索速度が速いのでオススメできません。なので、郵便番号はハイフンなしで整数型にしてデ...続きを見る
カテゴリ: PHP

6行程でアコーディオンメニューを導入

2012-09-08 15:50:55
jQueryを使用してたった6行程でアコーディオンメニューを完成させているコードがあったのでご紹介。 htmlStart $(function(){ $("dd:not(:first-child)").css("display","none") $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $(this).siblings("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); })...続きを見る
カテゴリ: Javascript

紙媒体広告のデザイン参考サイト

2012-08-30 20:12:58
デザインに迷ったときの強い味方となる参考サイトを見つけたのでご紹介。様々なジャンルの紙媒体広告の制作実績がたくさん見れて、しかもデザイナーのコンセプトまで書いてあるという丁寧なサイト。どれもクオリティーが高く、素材の使い方やレイアウトなどの勉強になります。デザインを志す人ならお気に入り必須のサイトでしょう! チラシデザイン作成PRO(チラシ実績を要チェック) http://www.pro-chirashi.com/...続きを見る
カテゴリ: WEB関連ニュース

文字列の出力

2012-08-20 04:02:27
「echo」(エコー)はブラウザにHTMLを出力します。文字列を出力する際に「”」「’」ダブルクォーテーションかシングルクォーテーションで文字列を囲まないといけません。そのルールを説明したいと思います。 <単純な文字列の出力> phpStart echo 123456; echo '123456'; echo "123456"; echo hello!; //←エラーがでます echo 'hello!'; echo "hello!"; echo あいうえお; //←エラーがでます echo 'あいうえお'; echo "あいうえお"; phpEnd 文字列はクォー...続きを見る
カテゴリ: PHP

色使いはキレイなサイトから盗めば簡単

2012-08-18 08:04:42
デザインで重要な要素は「素材の選定」「色使い」「レイアウト」の3つ。これが全てうまくいけば違和感のない美しいデザインに仕上がります。 3つの要素ともにどれも重要で、一つ欠ければダサいものになってしまいます。またほんの少し間違うだけでもダサくなってしまうことがあるので、デザインは本当に繊細なものです。美しいデザインは感覚で作られたものではなく、全てデザイナーの計算の上に成り立っているのです。 素材の選定は最初の方に行う工程で、これによってデザインのイメージが確定します。「広告は素材ありき」なので、いい素材がないといいものができません。素材収集→素材選定の工程だけで数日かかってしま...続きを見る
カテゴリ: photoshop

画像の保存形式について

2012-08-16 20:58:34
現在、WEBの画像ファイルはJPG(ジェイペグ)・GIF(ジフ)・PNG(ピング)の3つが標準規格で一般的に使用されている保存形式です。 それぞれ違う特徴があるので、ちゃんと知っておけばサイトの高速化を計ることが出来ます。画像はなるべく綺麗にできるだけ軽い容量で保存することが大切で、画像の容量が軽ければWEBページの表示速度が上がりますし、重ければ表示に時間がかかってしまいます。PCサイトでは気にならないかもしれませんが、通信速度の遅いモバイルやスマホ版のサイトでは表示速度が大きく違ってきます。 サンプル画像の上段は写真画像のケースの出力結果です。3つともほぼ見た目が変わりませ...続きを見る
カテゴリ: WEBの知識

動的ページのカラクリ

2012-08-13 16:48:05
PHPをゼロから始める人はfor文やif文などの構文を一通り見たけど、「で、何をすればいいの?」と足ふみをしてしまう人が多いのではないでしょうか? そんな人にまず知ってほしいのは動的ページのカラクリ。これが分かればドドドっと次から次へと課題が出てくるので、勉強が進みます。 では早速簡単な動的ページを作ってみましょう。まずは商品データが入ったログファイルを作ります。下記の例ではカンマ区切りで「ID」「商品名」「値段」という構成で一商品一列でまとめています。 <ログファイル data.log> htmlStart 1,アップル,200, 2,オレンジ,100, 3,メロン...続きを見る
カテゴリ: PHP

【フリー素材】スマホ用ボタン素材

2012-08-12 19:38:59
スマホ用素材をネットで探しましたが、なかなか大きいサイズのものがなかったので、結局自分で作っちゃいました。スマホは解像度がPCより2倍大きいので、例えば300pxのボタンを設置する場合は600pxの画像を使わないと画質がにじんでしまいます。指でボタンを押すのでボタンを大きく作るのがスマホサイトの基本ですね。 <スマホで画像を綺麗に表示する> htmlStart htmlEnd <スマホで背景を綺麗に表示する> htmlStart sample htmlEnd ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配...続きを見る
カテゴリ: WEB素材

【フリー素材】送信ボタン

2012-08-11 19:49:30
送信ボタンを作成しました。今回はアメリカのサイトでよく見られる配色のグラデーションを使用。PSDファイルもダウンロードできるので自由に文字が編集できます。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

写真をイラスト風に加工する

2012-08-10 09:32:32
今一番売れてるバラドルの大島麻衣の写真を元にPhotoShopでイラスト風に加工しました。やり方は下記の参考サイトをご覧下さい。写真付きですごく分かりやすく説明されています。 ザッと言葉だけで説明すると、元画像を3枚ほど複製して、それぞれにカットアウト・鉛筆・輪郭検出のフィルター加工をし、加工したレイヤーを乗算やスクリーンなどのレイヤースタイルにして元画像になじませるというものです。 写真素材に困ったときはイラスト風に化けさせれば、タレントの画像を使っちゃっていいかも!?元がばれなければね。ただ、写真をイラスト調にするとサイト全体をイラスト調のデザインにしないと統一感がとれなく...続きを見る
カテゴリ: photoshop

【フリー素材】お問い合わせ用のボタン

2012-08-10 01:05:04
商用サイトでは必要になることが多いお問い合わせ関連の素材。シンプルでどんなサイトにも合いやすいものを作りました。お問い合わせの部分にこだわるのも大切なことです。今回はPSDにグラデーションパターンを付け足しましたので、是非ご活用ください。使用しているフォントはWindows標準のメイリオとArialです。日本語フォントならモリサワの新ゴが一番好きなのですが、最近はメイリオもなかなか気に入っています。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

【フリー素材】フォーム用のボタン

2012-08-09 03:04:20
個人的に好きな色のボタンを3パターン作りました。CSS3で表現できるものですが、IEが対応していないので、グラデーションや角丸はまだまだ画像を使っていった方が無難ですよね。ボタンの文字を編集したい方もいると思うのでPSDファイルもアップしてあります。 ダウンロード[PNG] ダウンロード[PSD] ※自由に使っていただいてかまいませんが、再配布はご遠慮ください。 ...続きを見る
カテゴリ: WEB素材

floatで横並びにしたli(リスト)をセンターにする方法

2012-08-04 16:51:12
ページャを作る時に重宝するテクニックです。floatで横並びにした場合、text-align:center;ではセンターにはなりません。potosion(ポジッション)を使って実現させます。 <CSS> htmlStart div.pager { font:14px Arial,Helvetica,sans-serif; position:relative; overflow:hidden;} div.pager ul{ float:left; position:relative; left:50%;} div.pager ul li { float:left; position...続きを見る
カテゴリ: CSS

あると便利なリスト用アイコン

2012-08-04 04:13:26
画像をダウンロードして、フォトショップで切り抜き加工をして使ってください。CSSの宣言方法も記載しておきます。 <HTML> htmlStart サンプル1 サンプル2 htmlEnd <CSS> htmlStart ul.listMark li{ background:url(/img/list.gif) 0 2px no-repeat; padding-left:15px; } htmlEnd 背景ポジション(0 2px)←この部分はline-heightの設定値により数値の調節が必要になります。ポジションの数値はマイナスの値も使えます。 ...続きを見る
カテゴリ: WEB素材

floatの回り込み解除にclearfixを使う

2012-08-04 02:47:58
<サンプル> ヘッダーなどでサイトロゴの横にバナーを置く時に回り込みの解除が必要になってきます。背景画像があるカラムの中でfloatを使って回り込みをすると、背景画像が表示されなくなります。そこで背景画像を指定しているタグにclearfixを使えばちゃんと背景が表示されるようになります。clearfixは便利なのでサイト毎に必ず宣言しています。オーストラリア人のTony Aslettという方が、cleafixを考案したらしい。 <CSS> htmlStart .cf:after{ content: "."; display:block; clear:both; he...続きを見る
カテゴリ: CSS