デザインとか加工とか出来ないからなんかいいの教えて、と言われて教えたツールいろいろ - かちびと.net
友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 普通に写真や画像を掲載するのではなく、ちょっと個性的な感じにしたい、出来れば無料がいい、でも自分でデザイン作業は出来ないから良いサイトとか無い？とのことでした。 どうしたいのか良く分からなかったので、あんまり一貫性は無いんですが、教えたのは画像加工ジェネレーターとかそういうのです。いくつか提案した中で、友人が喜んでたサイトだけまとめてみます。 BeFunky 画像を加工するジェネレーター。レトロっぽくしたり油絵っぽくしたり。エフェクトも豊富です。 BeFunky flauntR これも加工ジェネレーター。エフェクト以外にフレーム
商用OKも有り・日本語表記でライセンスなども分かりやすいフォント配布サイトFonts2u.com - かちびと.net
フォントを探したいけど英語が苦手で ライセンスが心配、という方も少なく 無さそうですが、Fonts2u.comという サイトの日本語はほぼ完璧な日本語 なのでそういった不安も無く利用でき ますよ。 基本的に多言語化されているサイトですが、日本人が運営してるかと思うくらい日本語が完璧です。というか日本人じゃないかな・・ フォントの種類もベトナム語、ドイツ語などなど、少し変わったものもあります。ゴシックなども、「ケルト」、「モダン」などの表記で分かりやすいですね。 ライセンスも日本語表記ですよ。この場合は「個人利用」ですね。 ライセンスはフォントごとに表記がありますが、Fonts2u.comには以下のようにあります。 Fonts2u.comで利用可能なフォントは、GNU/GPL、フリーウェア、個人利用に限り無料、ドネーションウェア、シェアウェア、あるいはデモです。ライセンスタイプは明示されてい
Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
HTMLをWPテーマ化する時の手順リスト - かちびと.net
一般的なHTMLファイルをWordPressの テーマにする時の手順と、使用するタグ をリスト化、というか自分用チートシート。 いつも子ページが時間掛かるので、単純 な構成のHTMLなら、テーマ化くらいは サクサク終わらせたいですね。 唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。 WPテーマ化手順リスト STEP.1 HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。 以下のインクルードタグをindex.php、search.php、archive.phpに追加。 <?php get_header(); ?> <?php get_footer(); ?> <?php get_sidebar(); ?> STEP.2 header.phpのmeta
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net
cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニュー シンプルなドロップダウンメ
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
WordPressでzen-codingを使えるようになるプラグイン・WP Zen-Codingが凄く便利
話題のzen-codingをWordPress で使えるようになるプラグイン、 「WP Zen-Coding」を試してみま した。これ、本当に便利です。 話題のzen-codingをWordPress で使えるようになるプラグイン、 「WP Zen-Coding」を試してみま した。これ、本当に便利です。 確かにコーディングスピードが速く なりそうですよ。 zen-codingって何？と言う方は、Zen-Codingが楽しいという記事をご覧下さい。分かりやすいです。 zen-codingを使うと、タグ入力作業をショートカットの要領で行なう事が出来きます。例えば div#header>div#contents>ul.navigation>li*4>aと打ち、ctr+E（winの場合）で以下のHTMLコードを展開してくれます。 <div id="header"> <div id="conten
今更CSS-TRICKSのCODE SNIPPETS GALLERYのWeb制作Tips集が便利なことに気が付いた - かちびと.net
今更ですが海外記事の紹介 でよく見かけるCSS-TRICKS が構築しているページの中に CODE SNIPPETS GALLERY というページがあるのですが、 これが個人的に激しく便利な 事にようやく気が付きました・・ 何度も見てるブログなのに今まで全く気が付かなかったです・・・知っておくと地味に便利なcssやjQueryのスニペットをさらっと書いてまとめてくれています。 色分けされてて見やすいです。 探しやすい 見出しはスライドし、各スニペットの題名がリンクになっています。 例・IEにもcss3の回転を実装させる css3のtransform: rotate（回転）をIEでも実装する方法とか。 Text Rotation 例・4行のコードでドロップダウンメニューを作るjQueryコード ドロップダウンメニューを作れる簡単なコードとか。 Disable Parent Links in
好みのテイストでカラースキームを作成出来るシンプル且つ軽量なWebサービス・PALETTEMAN - かちびと.net
覚えておくと役に立つ時もあり そうだったのでメモ。好みのテ イストでカラースキームのサン プルを出してくれるのでどういう 色を使えばいいか分からない、 という時に参考になりそう。 多くは無いですけど、テイストにあったサンプルを元にカラースキームを作成できるので個人的に助かります。何よりシンプルで軽量なのが気に入りました。ページ移動は一切不要で、入力の必要もほとんどありません。 サイトも広告等も無く、シンプルで使いやすいです。簡単に使い方をご紹介。 テイストのサンプルを出してくれる 左サイドにテイストがあるのでクリックすればパッとサンプルを出してくれます。これはFruity（フルーティ－）のサンプル。用意されたテイストの意味はだいたい以下のような感じです。 Industrial / 産業・工業のイメージ Pale / 弱い・薄暗い・淡い印象のカラー Romantic / ロマンチックなイメー
css3を直感で学べそうなフリーのジェネレーターを公開しているCSS3 Sandbox
話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 直感でグラデーションやドロップシャドウを作成、リアルタイムでプロパティが変わってくれるのでいい勉強になりそうです。CSS3 Sandboxの4つのジェネレーターをご紹介します。 Linear Gradients グラデーションを作成出来ます。左上でWebkit(SafariやChrome)かFirefoxを選択、その下でプロパティを決めます。実装画面下部に実際のプロパティが表示されるのでどのような数値でどう変化するか、というのが分かると思います。 Text Sha
WordPressテーマカスタマイズ事始め・基本構造を理解してカスタマイズしてみる - かちびと.net
WordPressを使っているけど、 PHP分からないし、カスタマイズ は未経験・・という方の為の カスタマイズ方法です。PHP を理解せずとも基本構造を ある程度理解すれば可能です。 PHP製のWordPressですので、当然PHPを理解していれば様々なカスタマイズが可能ですが、プログラミング自体まだ敷居はデザインより高いかもしれません。 でも、カスタマイズしてみたい！という方も多いと思いますので今回はカスタマイズ始めの1歩、的な内容です。 はじめに これはPHPの記事ではありません。コピペ（ファイル間でのソースの移動など）が基本になるのでプログラマーさんからすれば酷い記事になると思いますが、デザイナーさんが少しでもプログラミングに興味を抱き、理解する事でチームの作業が円滑になる側面も期待しつつエントリーしてみます。 で、カスタマイズする前に以下にご注意頂きたいと思います。 テーマファイ
WebデザインにjQueryを使いたい人向けの動画チュートリアルサイト・jQuery for Designers - かちびと.net
jQueryをWebデザインの為に使い たい、という方にお勧めのサイト・ jQuery for Designersのご紹介。 jQueryは様々なプラグインがあり ますが、ここはWebデザインに特化 しています。 jQuery for DesignersはデザイナーのためのjQuery情報サイトです。まだ数自体は少ないのですが、チュートリアルやデモを中心に情報を配信していますので今後の期待も込めてご紹介します。 Webデザイナー用のjQuery情報サイトです。右上に「Easy」、「Medium」、「Hard」とありますが、これは導入難易度を示しているようです。 チュートリアルは動画とテキストがあります。動画コンテンツ上部のdemo、View Codeでデモやコードのページに切り替えます。 例えば以下のような情報があります。 Automatic Infinite Carousel 自動でスラ
軽量で超シンプル、無料のマインドマップ作成Webツール・Thinkを試してみた - かちびと.net
動作がスムーズで気持ちいい マインドマップWebサービスの Thinkを試してみました。手軽 でシンプルなのでなかなかいい 感じです。日本語もOKですよ。 操作も直感のみで使えます。 ユーザー登録しないと保存は出来ませんがメールが不要、フリーのWebサービスなので気軽に使っています。マインドマップって何？という方はこちら。 Wikipedia-マインドマップ マインドマップ活用クラブ マインドマップの書き方（手描き） ITエンジニアのためのマインドマップ入門 KJ法と似たようなものですね。情報やすべき事などをまとめて整理する方法で、整理する事で無駄の無い行動に繋げる事が可能です。プレゼンにもよく用いられますね。何にでも応用が利くので行なう癖を付けておくと合理的に事を進められます。 マインドマップを気持ちいいくらいスムーズに作る事が可能です。大掛かりなマインドマップには不向きですが、ちょっと
最近見つけた完成度の高いフリーのWordPressテーマ
最近知ったthemes2wp.comというサイト のフリーのWordPressテーマで、個人的 に完成度高いなと感じたテーマをいくつか ご紹介したいと思います。完全に主観が 入っているので参考にならなかったら ごめんなさい。 ここで言う”完成度が高い”、というのは「使いやすそう」「変更箇所が少なそう」という意味です。いいデザインにしたいけどカスタマイズは面倒・・・という方にお勧めです。11個あります。 [note]ワームのご報告を受けて全テーマへのリンクを削除しました。テーマは沢山ありますのでテーマカテゴリでお探しになってみてください。[/note] BlockStock Theme 非常に綺麗なテーマです。シンプル系がお好きな方なら殆ど変更する箇所無さそうな気がします。個人的に凄く好きなテーマです。 ※「誰がために鐘は鳴る」さんよりご指摘を受けてリンクを削除しました BlockStock
iPhone、BlackBerryに続き、WordPress公式のAndroidアプリがリリース
WordPressが公式にAndroidのアプリを リリースしたようです。以前から噂されて いたみたいですが、既に正式リリース。 wordpress.orgのサブドメインにて専用 サイトも運営しており、動画を見ることが 可能です。 Androidユーザーの方でWordPressを利用されている方には吉報ですね。 WordPress for Android 動画を見る限りではかなり使いやすそうな印象です。さっそくレビュー記事を書かれている方を見つけましたのでご参考にされては如何でしょうか。公式サイトは以下。 WordPress for Android iPhoneやBlackBerryのアプリもiPhoneやBlackBerryの公式アプリもあります。リンクよりご覧下さいませ。 WordPress for iPhone WordPress for BlackBerry iPhoneアプリから
あのサイトを作りたい！オープンソースのクローンCMSまとめ
「自分であんなサイトを作りたい」と、思う Webサービスは結構多いかと思います。 いくつかの有名なWebサービスは クローンのCMSがオープンソースとして 提供されているものがあります。そんな クローンタイプのCMSをいくつかご紹介します。 既出のCMSばかりですが、個人的も一度まとめておきたいのでメモも兼ねて。 Diggクローン 海外でもかなりの人気ソーシャルサイト、Diggのようにユーザーが投稿、Vote（投票）を行えるCMSです。以前SEOカスタマイズ法も書いたので宜しければ合わせてご覧下さい。Pliggが相性悪いなと思うようならPHPDugもいいかも。 Pligg / デモ Deliciousクローン ソーシャルブックマークサイトとして有名なサイトがDeliciousです。タグを付けてWebサイトへのリンクを簡単に追加、共有できるオーップンソースのCMSがscuttleです。僕もこ
HTMLメールマガジンの良デザインばかりを集めたEMAIL GALLERY - かちびと.net
そっけないテキストのみのメールマガジン よりもHTMLを使った良デザインに拘って いる方に参考になりそうなギャラリー、 EMAIL GALLERYをご紹介いたします。 インスピレーションの向上にいいかも しれません。 詳細は以下より サムネイルも大きくて見やすく、探しやすくなっています。大手企業のメールマガジンなどのデザインもちらほら。 ↑ Vogue ↑ Apple ↑ HP ↑ Nintendo 「メールマガジンは時代遅れ」なんて声が無くも無いですが、やり方次第では効果に差異が生じる気もします。HTML形式も受け取る側がテキストと選択できるようにするなど、工夫も必要そうですね。 メールマガジンに関する情報を少し OutlookでのHTMLメールマガジン作成マニュアル メルマガ、HTMLメールを作成するソフトThunderbird メールマガジンを配布できるフリーcgi一覧 EMAIL
フルFlashサイトを作成出来るフリーソフト・AuroraFlash
結構凄いと思ったのでご紹介です。 フリーソフトでフルFlashサイトを作れ るAuroraFlashを試してみましたが、 これがなかなかよさ気。まだアップ ロードはしていませんが、作成時で は日本語でも問題なく表示されます。 adobe不要でFlashサイトを構築できるフリーソフト、AuroraFlashの簡単な使い方を記載しておきます。 まずはダウンロードしてセットアップを行います。が、至極簡単に進められますのでここでは割愛し、使い方をあげておきます。 セットアップ後にデスクトップにアイコンが表示されますのでダブルクリックをして起動させます。以下の画面になればビルダーのセットアップは完了です。 右側が操作ボードになります。左側で動作を確認する事が可能です。一番上でコンテンツの変更作業を行います。真ん中は音声ファイルで、削除したり追加したり。一番下はテーマ（テンプレート）です。 テーマを選
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy - かちびと.net
閉じたタブ、現在開いているタブ、同じサイトのタブを直ぐに確認できるChromeエクステンション・TabJump
