DESIGN」カテゴリーアーカイブ

オリジナルグッズを作り、すぐ販売したい!

「オリジナルTシャツを作ろう!」と色々デザインはしてみたものの、貯めるばかり。
うっかり年数が過ぎまくり、いい加減オリジナル商品のショップを作りたい。
しかし、サービスはいっぱいだ。どれを使おう…
となったので、数日コツコツと調べてみた。

ショップの条件

『自分のお店を作る』だけのショップ作成サービスなら、割と沢山ある。
何年も一向に作らなかった怠惰の自分である。手間はご法度だ。
そこでワガママだけど、今回はショップを作るに当たって条件を付けた。

  • 無料でショップ作成
  • 維持費・年会費も無料
  • デザインだけで、作りたい
  • 個数1から注文可能
  • 在庫は一切持ちたくない
  • 注文から発注・配送までお願いしたい

自分が選んだサービス5選

とりあえず5つに絞ることにした。結局20個も調べていた。疲れた…

試しに店作っていたら、想像以上に時間がかかるかかる。
『作った』とあるのが、ショップを作ってみたもの。
見て貰えれば、どんな感じになるかイメージしやすいかと。
続きを読む

CSSフレームワークメモ

何かWEBサービスを作るのに当たって0ベースでデザインを考えるのが、たまにめんどくさい。
勉強がてらの突発的なサービス開発なんてなると、熱が最後まで持たないのだ。
ならば、既存のを利用すればいいのです!

という訳で、下記を条件としたものを探そうと思う。

  1. OSS
  2. 軽量コンパクト
  3. 使いやすい

続きを読む

もくじをカンタンに自動生成する方法いろいろ

ブログを書いていると、文章が長くなる。
長くなると、どこにどの項目があるか、探すのがメンドウ。
リンクで該当項目に移動する目次が欲しい。

見つけたもので、使いやすいな、というものをメモしておく。
続きを読む

Data URI Schemeスペーサーgif

デザイン作成時に間隔調整等によく使われてた スペーサーgif(透過gif画像)『blank.gif』
今となっては滅多に使わないからData URI Scheme化すると「あれどこ行った?」とならず便利だよね、とメモ。
自分は画像カバーとして使用するので、画像サイズを色々揃えてみた。
続きを読む

タイムラインコンテンツを作る

仕事履歴だとスキルシートだのコンペ歴だの資格一覧だの諸々、タイムライン作った方が情報を伝えやすいものがある。
せっかくなので見栄えがよろしいタイムラインコンテンツを作ろうと思うところなので、組み込んでみた感じを見てほしい。
全てレスポンシブ対応!

組み込むのって、既存のCSSの影響受けるから、結構時間かかるんデスヨ。
class名既存とよく被るに外側をdiv#XXXで囲って区別してるわけではないしね。

だが、『全部一緒のページに表示させられるかな?」という冒険心がここにある。
続きを読む

seesaaブログのヘッダーバナー

いつの間にか追加されていたseesaaブログの上部のバナー。
あいつのせいで勝手に広い幅を固定されて今まで使えてたデザインが何だかうまいこと行かなくなっていたり、ちょっと面白くない。

自分のデザインに少し合わせてもらおうという魂胆。
合わせるのに使った内容を記載しておく。
続きを読む

人に優しい色使い(ユニバーサルカラー)

ご年配の方々が見るサイトを作るときには結構便利。
アクセシビリティ、ユーザビリティを考えるなら使えるツール。

まぁ そんな機会もうずっとないから、しばらく使ってなかったんだけどもね…
富士通製作だけど、2000年にはadobe japanにも紹介ページがあったくらいのものだし、vistaにも対応だから、機会があれば試してみるといいかも。
続きを読む

データシートで1行ずつ色付け

全部白い表は見づらい。
色を付けるだけで随分と見やすくなるし、何だかオシャレであり、配布資料でやると喜ばれる。
簡単に出来るオススメな行為である。

手順は
1.セルを右クリック、もしくは上部メニューに『条件付き書式』的な文章のメニューがあるので選択。

2.『数式を指定』的な文章のプルダウンを選択。
すると出てくる入力エリアに

=mod(row(),2)=1

と入力して、デザインを変更すると1行ずつそのデザインが変更される。
続きを読む

サイトに自動的にルビ(よみがな)を振ってくれる

URLを後ろにつけるだけで自動的にルビ(よみがな)を振ってくれるシステムを今日知った。

指定の仕方は

http://trans.hiragana.jp/ruby/[ルビつけたいURL]

これだけ。

表示例として、
まずは通常表記がこちら

それを

としてアクセスしてみる
と…
おおおお!
というわけです。
続きを読む

Google Chart APIを使ってQRコードを作成

グラフやチャートを動的に作成してくれる『Google Chart API』
なんとQRコードまで作成してくれるとは!!

使い方は簡単

http://chart.apis.google.com/chart?chs=【横px】x【縦px】&cht=qr&chl=【エンコードしたメッセージ】

これだけ。
※choe=XXXでエンコードを変更可能。デフォルトは『UTF-8』

ブラウザでURLを入れてみると見えます

firefoxだとPNG形式で
IEだとQuickTime形式で
表示されるのね、何故か。

IE表示のソースにはしっかり

<embed width=100% height=100% fullscreen=yes src="http://chart.apis.google.com/chart?chs=100x100&cht=qr&chl=[MOT]http://qooga.jb-jk.net">

となっている。

でも自動的に画像として使えるという噂、貼り方が異なるなんてとんでもねぇことはあるはずねぇ
てことで、試しに貼ってみました。
続きを読む