コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ

2019年1月13日 JavaScript, Webデザイン 近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 ↑私が10年以上利用している会計ソフト！ JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します。 three.js ドキュメント｜サンプル集 揺れ動く布や、画面いっぱいに浮かぶ球体など、様々な3D表現を可能にするJavaScriptライブラリー。ホームでは実際に利用しているWebサイトが数多く紹介されています。豊富なサンプル集も必見です。 GreenSock ドキュメント｜サンプル集 ア

2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ

2013年3月25日 CSS CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Webフォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまりiPhoneやiPadといった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロー

2015年1月16日 フォント, 便利ツール 久しぶりにブックマークしているサイトを整理しました。という事でお掃除後の恒例行事？私がブックマークしているフォント・Webフォント・テキスト関連のWebサイトを、中の人へ感謝の気持ちも込めてシェアします！何年もお世話になっているサイトばかりですが、ここ最近はWebフォント関連のサイトが増えてきましたね。いいな！と思えるサイトがあれば嬉しいです。 ↑私が10年以上利用している会計ソフト！ フォント関連 フォントhack.jp フォントhack.jp 日本語の無料フォントの表示確認ができるサイト。複数のフォントを表示して比較することもできます。 dafont dafont 英字の無料フォントを大量に集めたサイト。大量すぎて眺めてたらいつも物凄く時間がたってますw ライセンスは各自要確認。 フォントガレージ フォントガレージ 日本語フォントの販売サイ

2013年3月25日 Web Design Web design gallery websites are very useful to get inspiration. When you had created great works, show off your creative design which you are really proud of! All of the ones featured in this post are free to submit to. I will share some Japanese web design galleries as well. [adA-en] You can submit your website from “Submit” page. People who are managing those gallery websit

Photoshopできれいな水彩画風デザインに挑戦！水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください！ また動画撮ってみました。ただでさえ時間かかってないのに、４倍速にしたら 30 秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね！ 1. ぼかし画像を開いて、そのレイヤーを複製します（コマンド＋ J）。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし（詳細）で、「半径」を 10、「しきい値」を 25〜30 に設定します。 2. エッジの光彩元の画像レイヤーを複製し、「blur」レイヤーの上に置きます。レイヤー名を「line」に

ポートフォリオサイトをリデザインしました！この度、私のポートフォリオWebサイトを約3年ぶりにリニューアルしました！日本語版もあります。実は以前あったものが人生で初めて作ったWordPressオリジナルテーマでした。当時の自分なりにいろんなサイトを見ながら、試行錯誤して作ったものの、今見ると階層ぐっちゃぐちゃ、コードも古いので、改めて作りなおすことに。 こんな感じになりました。 Web フォント今回のデザインの大きなポイントのひとつに Web フォントがあります。書体のもたらすデザインへの影響力がうまく表現できていると嬉しいです。英語版ではGoogle Font使用。初めての試みとして、日本語の Web フォントも試してみました。TypeSquareを利用しています。ただ、ご覧頂ければわかりますが、ちゃんと表示されるまで若干タイムラグが発生しています。日本語の Web フォントはやはりまだ

2013年8月28日 Webサイト制作 オンラインショップで最も使われている決済方法がクレジットカード決済。しかし、過去にオンラインショップを制作したことのあるWeb屋さんは、決済時の動作テスト方法にとまどった事はありませんか？動作確認に自分のクレジットカードを使っていたという人が多いかと思います。私もそうやってテストしていました…が、実は各種メジャークレジットカードではオンライン決算時用のテスト番号があるのです！便利ですよね！ ↑私が10年以上利用している会計ソフト！ 以下のクレジットカード番号を使えば、実際に決済が完了した時と同じ動作をします。もちろんテスト番号なので実際に入金などはありません。有効期限は現在の年月より先のものならなんでもOKです。 広く使われているこのテスト番号ですが、対応していないサービスもあります。番号自体のチェックは「【PHP】クレジットカードチェックサンプル」

2016年6月8日 Wordpress, 便利ツール ブログツールとして大人気のWordPress。Wordpressを使って、WebやIT関連の情報ブログを書いている方も多いと思います。今日はWebデザイナーやプログラマー等の本職＋ブロガーとして働く皆さんの強い味方となるプラグインをいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ Key Shortcut Formatter Key Shortcut Formatterはショートカットキーを表示するのに便利なプラグイン。アプリの使い方などでショートカットキーを説明する時に便利。例えばMacで「貼り付け」を説明するのに、通常「コマンド＋V」と書きますが、このプラグインを使えば コマンド + V と表示できます！ちょっとした違いかもしれませんが、見栄えがよくなりますね。また、画像を使わずCSSで装飾しているので、CSSをいじれ

Wordpress オリジナルテーマの作り方 3.0+Wordpressのオリジナルテーマの作り方について説明していきます。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが（もちろんあった方が楽ですが）、自分でデザインをするためのPhotoshopとCSSの知識は必要です。 Wordpress オリジナルテーマの作り方 3.0+Wordpress オリジナルテーマ作成 完璧ガイドWordpress をローカルにインストールするWordpress オリジナルテーマの作り方 ← 今ここWordpress オリジナルテーマをアップロードする1. Wordpress のコーディングに入る

ロゴ作成の手順を実例とあわせて紹介！企業のイメージを明確にすることを「ブランディング」と呼びます。企業ロゴはそのブランディングが色濃く反映され、企業のイメージを左右する重要な部分です。今回は「ロゴとはなんぞや？」というところから、私のロゴを実例に、ロゴの制作手順を紹介しようと思います。 先日「ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！」という記事内で、なるほどな、と頷ける文章に出会いました。 WEB サイトは、エンドユーザーに伝わらないデザインだとわかればリニューアルするけど、ロゴデザインはエンドユーザーに伝わらないからと言って作り変えることは殆ど無い。それはつまり、ロゴはお客様の為に作るんじゃないと、ロゴは自分たちの意思や考えの象徴でもあるからそんなに簡単に変えるわけにはいかない、自分たち（ロゴに込められた物を背負う人達）の為に作る物なんだ。 ふむふ

2013年3月25日 ダウンロード ページを開くと、無機質な「メンテナンス中」の表示。誰もが一度は見たことがあると思います。文章のみが表示されると、なんだか寂しいですよね。だからと言ってメンテナンスページを作るのに時間をかけたくない…。そんな方のために、カウントダウンタイマー付きの「準備中ページ」テンプレートをご用意しました！ご自由にお使いくださいませませ。 ↑私が10年以上利用している会計ソフト！ ダウンロード デモ 仕様 無料 商用サイトでの利用可 日付設定するとカウントダウン可能 Chrome、Safari、Firefox、iOS、IE7〜9、Operaで動作確認済 タイマーの設定 タイマー設定は index.html の <head></head>内にある $(function () { $('#countdown').countdown({until: new Date(2013

2014年2月25日 Web関連記事, インスピレーション 私は普段紙の本をほとんど読みません。年に１冊読むか読まないか…。しかし、iPadを購入してからはなぜか電子書籍なら読むようになりました。ディスプレイで読む事の方が慣れているからですかね…？という事で私が最近読んだ無料の電子書籍をいくつか紹介します。日本語のものは比較的サクサク読めるものばかりなので、空いた時間に読んでみてください！ ↑私が10年以上利用している会計ソフト！ インタラクティブPDFでつくったインタラクティブPDFのつくりかた〜動画/音声再生・ページ効果編〜 ダウンロード InDesignで動画や音声付きのPDFファイルの作り方を説明してます。サンプルもついています。紙の本では表現できない、電子書籍の魅力はこういった点にあると思うので、これから電子書籍の出版を考えている人には参考になると思います。 地域でメディアづくり

2014年8月17日 スマートフォン 「iPhone/iPadアプリを作るのは難しい」。デザイナーの人は特にそう思い込んでいませんか？確かに新しいプログラミング言語を習得するには時間がかかります。しかし、一度「楽しい！」と思えばこっちのものです。その気持ちだけで難しいものも簡単に乗り越えてしまえるもの。そう、もう無敵です！どんなアプリでも作れるようになります！ここではアプリの開発方法よりも、「どうやって楽しく学習できるか」に焦点を当ててみたいと思います。 ↑私が10年以上利用している会計ソフト！ 準備しよう 必要なもの Mac OS Lion iOSアプリの開発は基本的にMac OSですすめることになります。Apple Storeでポチッちゃいましょう :P XCode 4 iPhone/iPadアプリの開発にはXcodeが必要になります。App Storeで最新のXcodeをダウンロード

2013年11月28日 便利ツール 私のメインマシンはMacです。以前から制作環境であったり、使ってるアプリを紹介してほしいとのリクエストを頂き続けているので、やっと重い腰をあげてまとめてみます…。というのも結構有名所のものばかり使っていて、目新しいものは特にないので…あまり…面白くないかなって…。それでも読んであげるよっていう優しい人は続きをどうぞw ↑私が10年以上利用している会計ソフト！ 簡単にスペック紹介 Macbook Pro 13″です。それでWebデザインって画面小さくないかって？小さいですよ！大きな画面に憧れてますよ！しかし国をまたいだ引越しが多く、作業もカフェや図書館ですることが多いので、持ち運びを重視して小さなサイズです。いい加減デュアルディスプレイにしたいです。 デスクトップ。普段はドック隠してます。デスクトップがファイルだらけになるのが嫌いなので、一時的に画像やファ

少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォンサイト用小技集　目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック（タップ

効果的なミニマルデザインと退屈なデザインの境界線ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ミニマルデザインとはそもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいのかわからないデザインになってしまいます。それを避けるため

2016年6月8日 Wordpress 以前このブログをリニューアルした時に「付け足したかった機能を１つまだ実装していない」と触れたのですが、やっと実装完了しました！Webクリエイターボックスがついに英語でも配信されます！わーわー！ブログを始めた時から友人から「英語化まだかよー」と言われ続け早２年。お待たせしました！今回はそんな英語化するにあたってqTranslateというWordPressプラグインを使って多言語化したので、その使用方法について書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 実は今回の記事のタイトル、どこかで見た事があるかもしれません。そう、以前「WordPressプラグイン「WPML」でブログを多言語化する」という記事を書いた事があるのです。この記事で説明しているとおり、私のポートフォリオサイトは「WPML」という、サイトを多言語化するWordPre

2013年3月23日 Webサイト制作 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんｗ 今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。 ↑私が10年以上利用している会計ソフト！ 冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。 基本的なFacebookページの作り方 まずはFacebookページを新規作成します。こちらの「Fac