タグ

ブックマーク / www.webcreatorbox.com (28)

  • WordPressの多言語化プラグインをqTranslateからWPMLに変更しました

    2016年6月8日 Wordpress 過去に何度か記事にした、WordPressの多言語化プラグイン。昔からWPMLを使用していましたが、qTranslateの存在を知り、このブログではqTranslateを使っていました。ところがなんだか問題発生したようなので、WPMLに完全移行!その理由と移行手順を紹介します。 ↑私が10年以上利用している会計ソフト! qTranslateとWPMLの違い ふたつのプラグインの違いをザックリと解説。使い方の説明は以下の過去記事をご覧頂ければと思います。 WordPressプラグイン「qTranslate」でブログを多言語化する WordPressプラグイン「WPML」でブログを多言語化する 翻訳記事の扱い 一番の違いは、ひとつの投稿記事に対する翻訳記事の扱い。qTranslateはすべての言語をひとつの記事としてまとめています。それに対しWPMLはデ

    WordPressの多言語化プラグインをqTranslateからWPMLに変更しました
  • 静かに流行り始めているポリゴン風デザインに挑戦!

    2013年5月9日 Webデザイン, インスピレーション, 便利ツール 2013年を代表するデザイントレンドと言えばフラットデザイン。それを横目に、実は静かに流行り始めている「ポリゴン風デザイン」をご存知でしょうか?ローポリと呼ばれているものですね。今回はツールを使って写真からポリゴン風イラストを作ってみましょう!デザインの参考になるWebサイトやグラフィック・アートもまとめているので、オリジナルポリゴンアートに挑戦してみてください! ↑私が10年以上利用している会計ソフト! 「triangulator」でポリゴン風イラストを作成 ポリゴンは通常は3D系のソフトで作りますが、PhotoshopやIllustratorでも作ることができます。ただ、それではかなり時間がかかってしまうので、写真をサクッとローポリイラストに変換できる「triangulator」を使用します。こちらの動画をご覧頂け

    静かに流行り始めているポリゴン風デザインに挑戦!
  • コーディング規約を作ろう

    2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト! コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「

    コーディング規約を作ろう
  • How to Transform a Man to a Pretty Girl Using Photoshop

    2013年3月25日 Photoshop 最近のPhotoshopはすごいですよね。物を何もなかったかのように消したり、ぽっこりお腹を自然にひっこめたり。今回はそんな魔法ツールPhotoshopで、男子をキラキラ女子に変身させてみようと思います!女性モデルにも使える技も多数紹介しているので、人物の補正をする時に参考にしてみてください! ↑私が10年以上利用している会計ソフト! 元画像はこちら ご協力してくださったのは、顔面広告などの個性的なサービスを立ちあげて活躍中の大川竜弥さん。写真素材を無料で配布しているサイト、PAKUTASOのモデルとしても大人気ですね!Web屋さんなら一度は大川さんの年収が低すぎて驚いている写真やこたつでだらけてる写真を見たことがあるのではないでしょうか? そんな大川さんを素敵に変身させますよー!ちなみに使用したのはMac OS, Photoshop CS6です。

    How to Transform a Man to a Pretty Girl Using Photoshop
  • Websites for Text and Fonts That You’d Better Add to Bookmarks

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

    Websites for Text and Fonts That You’d Better Add to Bookmarks
  • 【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう

    2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載!実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その4 目標:実際の幅にあったサイトデザインが作れる・Photoshopの基的なツールを使った装飾ができる 必要なもの:Adobe Photoshop 対象レベル:Photoshopの基的なツールの使い方がわかる 事前知識は以下の記事でおさらい! これからP

    【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
  • How to Create Website Wireframes

    2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基の流れはちゃんと説明していないな…ということで、「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト! 実践で学ぶWebサイト制作ガイド:その3 目標:わかりやすいワイヤーフレームを作成することができる 必要なもの:紙とペン 対象レベル:超初心者OK

    How to Create Website Wireframes
  • Credit Card Test Numbers and Paypal Test Accounts

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

    Credit Card Test Numbers and Paypal Test Accounts
  • How to Make Polar Panorama Photo Like King Kaio Planet

    2013年3月25日 Photoshop 連休なので軽くPhotoshopの小ネタでも。横長のパノラマ写真を使って、まるでドラゴンボールの界王星のような惑星風写真を作成する方法を書いてみます。連休で撮影した素敵な写真を加工してみてはいかがでしょう?たったの4ステップでできちゃいますよ! ↑私が10年以上利用している会計ソフト! 作り方 まずは横長のパノラマ写真を用意します。左右の端同士をつなげる事になるので、できるだけ両端の色や建物の位置が変わらない方がきれいに処理できます。 1. 「イメージ」>「画像解像度」で「縦横比固定」のチェックを外して、幅と高さを同じサイズにします。この例では2000x497pxの写真を2000×2000にしました。縦にびよーんと伸びた正方形の画像の完成です。

    How to Make Polar Panorama Photo Like King Kaio Planet
  • 3 Cool Techniques For Your Next Web Design Project

    2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか?」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います! ↑私が10年以上利用している会計ソフト! 準備:分析&実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLCSSが確

    3 Cool Techniques For Your Next Web Design Project
  • 15 Useful Code Snippets for Smartphone Website

    2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ

    15 Useful Code Snippets for Smartphone Website
  • Basic Logo Design Process

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

    Basic Logo Design Process
  • Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ

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

    Webデザイナーさんにおすすめの無料で読める電子書籍いろいろ
  • あなたは何点?Webデザイナーのためのクイズサイト12

    2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ!Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト! 休憩時間にサクッと挑戦! 選択問題やドラッグ&ドロップでできるゲーム感覚な問題いろいろ! 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基問題がクイズ形式で出題されます。制限時間は15分。「HTMLCSSを見てどのように表示されるか?」「smallタグは何を意味するか?」などなど、問題を解きながら勉強になります!

    あなたは何点?Webデザイナーのためのクイズサイト12
  • 「焼肉 三十八」のリニューアルをしました!

    2011年11月8日 Webサイト制作, Webデザイン こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。 受注 福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。 簡単なリニューアル時のご要望をまとめると下記6点でした。 お知らせ欄は更新可能 WordPressで構築 写真やテキストは流用 携帯版作成(コンテンツは一緒) ブログ・口コミ掲示板は削除 IE6は非対応でOK(ありがとうございます!!!) 制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeや

    「焼肉 三十八」のリニューアルをしました!
  • チームでWebサイトを制作する際に気をつけたい10のマナー

    2013年9月26日 Webサイト制作, フリーランス Webサイトの制作会社で働いている人はもちろん、普段一人で活動しているフリーランサーの方も、フリーランサー同士が手を組んでWebサイト制作を行ったり、制作会社がフリーランサーに受注するなどで、複数の人でひとつのサイトを制作することもあると思います。そんな時に起こりやすいトラブルと、それを防ぐ方法を考えてみます。ちなみに今回はデザイナー目線での気づいた事です。プログラマーさん目線での気をつけたい事などあればお聞かせください :) ↑私が10年以上利用している会計ソフト! デザイン時 1. レイヤーに名前をつける 「もらったPhotoshopファイルを開いたら、どれがどのレイヤーなのかさっぱりわからない!」なんて体験、ありませんでしたか?デザインファイルを共有する場合はレイヤーの管理がとても大切です。「レイヤー0」「レイヤー1」「レイヤー

    チームでWebサイトを制作する際に気をつけたい10のマナー
  • ブログ記事を読んでもらうための10の書き方

    2013年10月10日 Web関連記事, ユーザビリティ 私は基的に一日60記事前後、多くて100記事のブログに目を通しています。でもその中で上から下まで全て読むのはその半分以下。途中で記事を読むのをやめる事も多々あります。理由は求めていた内容と違った、というのも多いですが、「読む気がなくなってきた」なんてものも。最後まで読んじゃう記事はやっぱり読みやすさやまとめ方が違います。今ブログを書いている方も、これから始めようと思っている方もぜひ気をつけて欲しいブログ記事の書き方をまとめてみました。 ↑私が10年以上利用している会計ソフト! 1. 画像を使う これはチュートリアルサイト等の、何かを説明している記事は特に必要だと思います。私の英語力がまだまだだった頃のお話ですが、英語力がないにもかかわらず勉強も兼ねて英語サイトのみ閲覧するようにしていました。その時に思ったのが、スクリーンショット画

    ブログ記事を読んでもらうための10の書き方
  • 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを

    2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう!というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください! ↑私が10年以上利用している会計ソフト!

    【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
  • 少しの手間で大きく変わる、細部にこだわったWebデザインを

    2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか?私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう! ↑私が10年以上利用している会計ソフト! 追記:Photoshopを使った加工の仕方を記事にしてみました! » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの

    少しの手間で大きく変わる、細部にこだわったWebデザインを
  • 時間の節約になるWeb制作関連ツール 12+1

    2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう!今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ!」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト! Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな

    時間の節約になるWeb制作関連ツール 12+1