WebサイトにSlackと連携したチャット機能を加えられる【Smallchat】
2017年5月1日 便利ツール SmallchatはWebサイトにチャット機能を加えられるWebサービス。類似サービスは他にもありますが、Slackと連携できる点にメリットを感じる方も多くいらっしゃると思います。Webサイトにチャット機能をつけることで、Web接客やリアルタイム接客と呼ばれる、Webサイトでも現実世界の店舗や企業のように質問をすればすぐに受け答えしてもらえるような接客が可能となるでしょう。ECサイトなどで特に重宝できそう！さっそくどんなサービスなのか見てみましょう！ ↑私が10年以上利用している会計ソフト！ アカウント登録 まずはSlackのアカウントをお持ちでない方は作成します。すでにお持ちの方はログイン。続いてSlackの新規チームを作成しておきましょう。 SmallchatのWebサイトから「Add to Slack」ボタンをクリックしてSmallchatアカウントを
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
商用利用OK！2015年にリリースされた無料フォント35
2015年12月16日 フォント 2015年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント はれのそら明朝 かしこまりがちな明朝体に丸っこさをプラスしてスッキリ美しく仕上がったフォント。縦書きでもきれいです。 JKゴシックL 丸っこくてこじんまりとした可愛らしいフォント。少し太くなった「JKゴシックM」もあります。ちなみにフォント製作者は女子高生ではないようです。 機械彫刻用標準書体フォント 工業的な彫刻によって文字を作成するときの標準としてJISに定められたフォント。サイトではフォントの設計について詳しく紹介されています。 コーポレート・ロゴ 企業や
料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも！
2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名： ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ
The Basic Idea of Symmetrical Design
2014年1月28日 Webデザイン デザインをする上でシンメトリー（対称性）は頻繁に使われる手法のひとつです。古代から様々な場面で使われてきた美の構図、シンメトリーをうまく取り入れることで、安定感のあるレイアウトを生み出すことができます。今回はこのシンメトリーに焦点をあて、具体例とともに構成方法を考えてみようと思います！ ↑私が10年以上利用している会計ソフト！ シンメトリー（対称性）とは シンメトリーは広く「左右対称・反転」として知られていますが、他にも「回転」や「平行移動」、「拡大・縮小」も含んおり、これらの手法を取り入れた構成のことを言います。シンメトリーには規則性があり、バランスのよい安定した調和を感じさせます。シンプルで一度法則を覚えたら様々なデザインに取り入れられるので、デザイン初心者な方でも比較的容易にまとまったレイアウトを構成することができます。 シンメトリーとは異なる、
Free “Japanese-ish” Fonts 10 + 1
2013年3月25日 インスピレーション, フォント 先日同僚と日本語の文字についておしゃべりしていると、「日本語はまるで絵や記号みたいだ！」と言われました。確かに私達日本人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね！ということで探してみるといくつか見つかった素敵フォント。パッと見日本語に見えたり、日本をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト！ 「日本語風」の英字フォント 1. TokyoSoft ダウンロード（商用利用可） カタカナ風の英字フォント。日本人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…！ 2. Kaneiwa ダウン
Temporarily Stop Updating Blog
2017年7月23日 お知らせ 突然ですが、しばらくWebクリエイターボックスのブログ更新を停止します。@webcreatorbox での情報配信は、できるだけ続けたいなあとは思っていますが、今までどおり毎日配信できるかはわかりません。アンチWebクリエイターボックスの皆さんおめでとうございます。いつも楽しみにしてくださっている皆さんには申し訳ないです。 ↑私が10年以上利用している会計ソフト！ 更新停止の理由は、私の個人的なつぶやきを垂れ流しているTwitterアカウント @chibimana をフォローしている方は薄々気づいているかと思われますが、ちょっと大がかりな治療を必要とする病気になってしまいました。病名は今のところ公開するつもりはありません。 入院まではまだもう少し日にちがありますが、今のこの体でいられるのも後わずかという事、精神的にいかれてきている事もあり、ブログを書ける状態
あなたは何点？Webデザイナーのためのクイズサイト12
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト！ 休憩時間にサクッと挑戦！ 選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！ 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！
効果的なミニマルデザインと退屈なデザインの境界線
2013年3月23日 Webデザイン, インスピレーション ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ミニマルデザインとは そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいの
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは？
2017年7月14日 Webデザイン マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ！すべてはプロモーションとコンテンツ次第なんだぜ！」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ なぜWebデザインは重要なのか？ 以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか？ ユ
カテゴリー別配色アイデア100
2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と
シニア層のためのWebサイトユーザビリティ
2013年3月23日 ユーザビリティ 以前「笑っていいとも！」の山口智充さんのコーナーを見ていて、ちょっと驚いた事があります。20代～60代の女性の必需品をランキングしたもので、40, 50代女性では5位圏外だった「パソコン」が60代で3位にランクイン。シニア層のインターネット利用率は年々高まってきているのはニュース等で読んでいましたが、これを見てなんだか実感しました。という事で今回はシニア層のWebサイト設計について考えてみたいと思います！ ↑私が10年以上利用している会計ソフト！ 上記「笑っていいとも！」の件で興味を持った私は、シニア層のインターネット利用方法なんぞを調べていたところ、丁度私の母親が「インターネットで買い物がしたい」と言ってきました。彼女は海外に住む私と連絡をとるためにメールやSkype等を使う事ができるので、ある程度インターネットについて理解しているのだと思っていまし
こんなWebデザイナーは成長しない
2013年3月23日 ライフハック Webデザイナーのみなさん、自分を成長させるためにしていることはありますか？効率化をはかるため、よりよいデザインをするためにしていることはありますか？今回はあえてこんな記事のタイトルをつけましたが、ではどうすれば成長できるのか？という点も一緒に考えてみました。もし当てはまるものがあれば一緒に解決策を考えてみましょう！ ↑私が10年以上利用している会計ソフト！ 情報収集をしない Web業界では新しい技術や情報が毎日のように更新されていっています。情報が多すぎてついていけない…新しい事を覚えるのがめんどくさい…という人もいるかもしれませんが、私たちはWeb業界で働いているんです。Web屋にとって情報は武器です。日々の情報収集が仕事に役立つという場面も多くあると思うので、日頃から新しい情報にふれるくせをつけておきましょう。よく読むブログはRSSリーダーに登録し
プロジェクト管理ツール「Basecamp」の使い方
2017年6月30日 便利ツール 「海外Webサイト・海外Web屋の特徴」でも少し紹介したプロジェクト管理サービス、Basecamp。「日本語版があれば使ってみようかな」という人がいたのですが、実は日本語に対応しているのです！アカウントの作成、言語の設定を含めた、Basecampの簡単な使い方を紹介します！ ↑私が10年以上利用している会計ソフト！ Basecampとは？ Basecampは37signalsが提供しているオンラインプロジェクト管理ツール。「よりシンプルに使いやすく」をテーマに作られ、海外では企業やフリーランサーに大人気です。チームメンバーとタスクを共有することで、誰がどんな業務を持っているのか、どこでつまづいているのかなどがわかるようになり、結果プロジェクトの進行がスムーズになると思います。 Basecampの特徴 メッセージボード、ToDoリスト、マイルストーン、Whi
「ホームページを作る人のネタ帳」さんのリデザインをしました
2013年3月23日 Webサイト制作, Webデザイン Webデザインには大きく分けて2種類あります。新規作成と、既存のサイトのリデザインです。今回「ホームページを作る人のネタ帳」さんのリデザインをお手伝いさせて頂きました！リデザインにあたり、改善点やリデザインの流れをケーススタディーとして公開してみようと思います。 ↑私が10年以上利用している会計ソフト！ 打ち合わせ リデザインにあたり、まずは入念な打ち合わせをします。Yamadaさんからの要望は、 とにかく読みやすく、スッキリと 差し色にピンクを使いたい jQueryを使った何か仕掛けが欲しい の三点。文章主体であるこちらのブログでは読みやすさが命。スッキリとしたデザインを第一にしてほしいとのこと。また、「ユーザーに数秒でもいいので楽しんでもらいたい」という思いから、何か仕掛けを、と依頼されました。Yamadaさんらしい遊び心ですね
テーマカラー1色をメインに用いたWebサイト50
2018年10月11日 Webデザイン, インスピレーション, 色彩 前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね！ ↑私が10年以上利用している会計ソフト！ 追記：リンク切れサイトを削除したため、数が減ってます… テーマカラーをメインに取り入れる時のポイント 「配色に自信がなくても！Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほ
WebデザイナーにおすすめのEvernote活用術
2017年6月30日 便利ツール アイデアのメモも、画像も、音声も、とにかくなんでも保存できちゃうメモツール「Evernote」。有名すぎる便利ツールですね！逆に自由度が高すぎてどうやって使えばいいのかわからない、という方も多いと思います。今回は「Webデザイナー」をキーワードに私のEvernoteの使い方を紹介します。 ↑私が10年以上利用している会計ソフト！ Evernoteってなあに？ Evernoteの機能を簡単に説明します。 画像・音声・PDFファイルなどが保存できる アップロードできる容量は月に無料アカウント：60MB、プレミアムアカウント：1GB プレミアムアカウントは月額5ドルまたは年額45ドル ノートに対して一つだけ設定できるノートブックを大カテゴリとして使用 ノートに対して複数設定できるタグを小カテゴリとして使用 ノートブックもタグも階層化させて整理できる 携帯電話・ス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
