読者です 読者をやめる 読者になる 読者になる

Webbiz

Webサイト制作やビジネス・デザインに関する備忘録的ブログです。

Web制作

知らなきゃ損!「モリサワ」シリーズの日本語webフォントを無料で使用する方法

http://typesquare.com/ サイト制作にはwebフォントは欠かせない時代になりました。欧文フォントは「google fonts」をはじめ多くのサイトで配布されていますが、無料で使用できる和文フォントはなかなかありません。特に明朝体を使いたい時は有料の壁を前に…

リンクを貼るのに許可はいらない!

たまたまネットを見ていたら「当サイトへリンクを張る際は許可を得てください」と記載あるサイトが未だにありました。正直驚きです。これ、意味あると思ってるんでしょうか。ここの管理人はgoogleにも許可を求める気でしょうか。今回は「リンクの許可」につ…

illustratorCCで複雑なイメージマップ(クリッカブルマップ)を書き出す方法

イメージマップ(クリッカブルマップ)はクリックできるエリアを座標で指定しますが、複雑な形になると座標の指定がとても面倒です。そこで今回はadobe illustratorで書き出す方法を試してみました。 今回はこのイラストの1階・2階・3階の座標をそれぞれ指定…

【商用可】レスポンシブHTML5テンプレートがダウンロードできる「CoolWebWindow」

http://www.coolwebwindow.com/html5/ こちらでは現在、6種類のレスポンシブHTML5テンプレートがダウンロード可能です。個人・商用どちらも利用可能で著作権表示やリンクも必要ないとのことです。もちろん、再配布は禁止です。 用途別に6種類のテンプレート…

アイコンwebフォント「Font Awesome」が便利すぎて、楽しい!

webサイト上でアイコンを使いたいとき、みなさんはどんな方法で表現しますか?私はもっぱらアイコンwebフォントの「Font Awesome」を使用しています。 設置が簡単で楽しいので、アイコンを必要以上に使ってしまい、結果アイコンだらけの微妙なデザインになる…

【高品質でカッコいい】無料でホームページが作れるサービス4選

マイナーなものを含めると無料でホームページが作れるサービス自体はたくさんありますが、サービスが終わってしまっては元も子もありません。ある程度知名度がありユーザ数も多く、且つクオリティの高いサービスを4つほどご紹介します。 Wix http://ja.wix.c…

無料で開業できる!ネットショップ作成サービス6選

本格的なネットショップが簡単に無料で作れるサービスを一挙ご紹介。掲載できる商品点数や決済方法などそれぞれ特徴があるので目的に合ったものをチョイスしましょう。無料なので、片っ端からためしてみるのもアリかもしれません。 Yahoo!ショッピング http:…

よく使うWebサービス・SNSのロゴダウンロードページまとめ

いちいち探すのがとても億劫なので一覧にまとめました。 google http://deployment-ja.googleapps.com/Home/user-resources/google-icons-and-logos google+ https://developers.google.com/+/branding-guidelines Android http://developer.android.com/dis…

無料で商用利用可!レスポンシブテンプレート配布サイト5選

無料ホームページテンプレート.com http://f-tpl.com/ コーポレートサイトなどに最適なシンプルなデザインのものが豊富。2,980円でクレジット表記を外すことができます。 Template Party http://template-party.com/ ビジネス向けや店舗向け、個人サイト向け…

意外と面倒くさいダミー画像を簡単に作成できるwebサービス「Dynamic Dummy Image Generator」

http://dummyimage.com/ 意外と面倒くさいダミー画像の作成が簡単にできるwebサービスです。 Size:背景画像 Background Color:背景画像 Foreground Color:文字色 Format:画像形式(png,jpeg,gif) を設定し、自動生成された画像を右クリックで保存できま…

pngとjpeg画像を軽量化してくれるwebサービス「TinyPNG」

https://tinypng.com/ pngとjpegの画像を軽量化してくれます。 パンダさんの横の点線の枠の中にドラッグ&ドロップで圧縮開始です。 69%の圧縮に成功しました。パンダも心なしか嬉しそうです。 軽量化した画像は緑色のバー横の「download」からダウンロード…

これは便利!htmlやcssの差分をチェックできるツール「Mergely」

http://mergely.com/ htmlやcssなどのコードの差分をブラウザ上でチェックできます。右上の「online diff」はそのままブラウザ上で使用でき、「download」からダウンロードすればローカル環境でもチェックができます。 右のコードには左の赤い部分がありませ…