2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます！ ↑私が10年以上利用している会計ソフト！ カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら

2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多

2017年11月23日 便利ツール Webサイトに修正指示を出す時、どんなツールで、どのようにシェアしていますか？該当ページのスクリーンショットを撮影し、その画像に指示を入れていく…という方が多いかな、と思います。今回はWebサイトの制作者のみならず、制作者に指示をだす人や、クライアント側も使える、修正指示がグンと楽になりそうなツールをいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ AUN[あうん] AUN[あうん]はふせん紙の感覚でWebサイトや画像にコメントを残し、共有できるツールです。登録不要！無料で気軽に利用できるところが魅力的。対象となるWebサイトのURLを入力するだけでスクリーンショットを撮影でき、指示やコメントを残していけますよ。さっそく試してみましょう。 サイトからURLを入力し、読み込みが終わると、画面をトリミングするかどうかの選択画面が表示されます。読

2015年7月19日 オーディオ 以前告知しましたが、ポッドキャストにて、企業インタビューなんぞ始めました！遠方の方にお話を聞くことが多いので、インタビューにはSkypeを用いているのですが、編集の際Skypeで話しているゲストの声と、自分の声を別のトラックに録音した方が俄然効率がいいです。という事で今回はAdobe Auditionを使った録音方法を紹介。あまり需要はないかと思いますが、自分用の備忘録として記事にしてみます。 ↑私が10年以上利用している会計ソフト！ 用意するもの マイク Soundflower LineIn Adobe Audition Skype 設定方法は順を追って後述します。 録音手順 1. マイクの設定 マイクはBlueのYetiを使っています。オーディオ機器はよくわからないので、まわりの人からのお薦めを即決＋即買い。USBにつなぐだけで、すぐ録音開始できていい

2015年7月2日 お知らせ, 海外情報 以前このブログにてお知らせした通り、私の所属するFrogのサービスのひとつとして、Frog Schoolと題しクリエイターの教育方面にも力を入れていこうと思っています。第一弾が「Web制作＋英語の1ヶ月集中強化プラン開催！」なわけですが、記事と前後する形でようやくWebサイトが公開できました！そのコンテンツのひとつとして、私Manaがインタビューをする形でポッドキャストも始めます！ ↑私が10年以上利用している会計ソフト！ Frog Schoolって？ Frog Schoolでは海外での活躍や、英語を使って仕事をしたいと考えているクリエイターに向けたイベント・勉強会を開催しています。数時間使って行うクリエイター向け英会話講座やプログラミング、Web制作講座などの勉強会から、1ヶ月単位で行うブートキャンプまで、様々な形態です。場所はいまのところ弊社F

2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か

2016年7月15日 Webサイト制作, 海外情報, 英語 このブログの中の人である私、Manaは、普段クリエイターの留学を応援するバンクーバーの留学サポート企業、Frogの一員として、Webデザイナーやプログラマーをはじめ、多くのクリエイターの海外進出をお手伝いしています。Frogではこれから教育にも力を入れていこう！ということで、「Frog School」なるものをちゃくちゃくと進めているところです。教育事業の第一弾として、今回はこの夏バンクーバーで開催予定の「Web制作＋英語の1ヶ月集中強化プラン」について紹介します！ ↑私が10年以上利用している会計ソフト！ 『“英語”と“WEB制作”を同時に学びたい！』これから海外を目指す第一歩として必要な最低限の知識を、Frogが1ヶ月という期間の中で、可能な限りのサポートを提供します！この夏、なにか新しいことにチャレンジしたいと思いませんか？

2015年5月9日 Web関連記事 メールやカレンダー、SNS、写真など、インターネット上には多くの個人情報が残されています。通常はアカウントを登録したユーザー本人のみがアクセスを許されているはずですが、自分や身内に万が一の事があった時、これらの重要な情報はどのように扱われるのでしょうか？今回は私がよく利用しているサービスを中心に、故人のアカウントの取り扱いについて調べてみました。 ↑私が10年以上利用している会計ソフト！ Webサービスのアカウント Googleアカウント Gmailやカレンダー、Youtube、Google＋など、様々なサービスを提供しているGoogle。家族全員がそれぞれのアカウントを持っていてもおかしくないですよね。Googleでは一定期間ログインしていない場合、写真やメール、ファイル等をどう管理するか自分で設定できます。信頼できる友人や家族とデータを共有したり、ア

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

2017年3月24日 撮影 今回は私の所属する留学サポート企業Frogのブログでもインタビューさせていただいたふーみんによるゲストブログ！プロモーションビデオ撮影の際に気づいたこと、設定方法などを紹介してくれます！ちなみにそのプロモーションビデオのナレーションは私、Manaが担当していますw 動画の中にもちょこっと登場しているので、探してみてくださいね ;) ↑私が10年以上利用している会計ソフト！ 初めまして、バンクーバーにてクリエイター留学中のふーみんです！Manaさんが素敵な広報を担当する留学サポート企業Frogが運営し、僕自身の住居でもある『Frog House』のプロモーションビデオを制作しました！完全素人であった僕が、学校のインストラクターや友人のシネマトグラファーからのアドバイスをもとに１から動画撮影について学んだことを共有したいと思います。 制作したプロモーションビデオがこ

2015年1月10日 お知らせ 明けましておめでとうございます！そして早速ですが嬉しいお知らせです。2015年1月4日で、Webクリエイターボックスは5歳になりました！いつも温かいご声援を頂きありがとうございます :D そこで感謝の気持ちを込めて、毎年恒例のプレゼント企画を実施します！Twitterで手軽に応募できるので、ぜひぜひ参加してくださいね！ ↑私が10年以上利用している会計ソフト！ 当選者の発表 たくさんのご応募ありがとうございました！ 1. 「TypeSquare」Webフォント使いたい放題特別プラン @kgsiさん 2. バージョン管理ツール「universions」 @hisohimeさん @_takeumaさん @KiyoTakenakaさん 3. 人物専門の写真素材サイト「モデルピース」 @kuck1uさん @WEBDA0917さん 4. 快適な姿勢とストレッチを！「2

2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違

2014年11月29日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. Webサービス：「1冊から」「数百円で」本が出版できる「OneBooks」を使ってみました この記事をRTする 2. こんなところで働きたい！おしゃれなオフィスの写真15 この記事をRTする 3. 社員がフリーランスになる前に教えときたいこと この記事をRTする 4. Webデザイン：美しいミニマルデザインのWebサイト25 この記事をRTする 5. デザイン：様々な物のデザインが美しいと人気のノルウェー

2014年9月27日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. Tips：知る人ぞ知るiOS 8の隠し機能トップ10 この記事をRTする 2. ユーザビリティ：Appleがトップページで自動送りカルーセルをやめた理由 この記事をRTする 3.  速報：アップル iOS 8 提供開始。新機能・改善点リスト この記事をRTする 4. セキュリティ：被害の前に｜macを買ったら絶対にやるべき１０の無料セキュリティ対策 この記事をRTする 5. Webデザイン：デザイナー向け

2014年9月6日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. デザイナーに向いている (かもしれない) 7つの気質 この記事をRTする 2. 日本人の「あけおめ」や「バルス！」、Twitter社内で大きな問題になっていた この記事をRTする 3. セキュリティ：iPhoneでATM等の暗証番号を簡単に盗みとれる方法が話題に〜防止策も解説 この記事をRTする 4. jQuery：Web制作で使えた！jQueryプラグインまとめ＋起業しました この記事をRTする 5. 変な

2014年12月16日 便利ツール ファイルのバージョン管理＆プロジェクト管理ができるuniversions。昨年のクローズドベータ版の頃に開発者さんに紹介していただき、かわいらしいデザインと使いやすさからずっと応援していたツールです。「デザイナー向けにGitなどを優しく解説する記事はありますが、どうしても構築の手間や敷居の高さがあるのではないか…」という開発者さんの思いがうまく反映され、使われている言葉もわかりやすく、スッキリとしたデザインになっています。どんな方でも安心して使いこなせるはず。先月ついに正式版がリリースされたので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ エンジニアじゃなくても簡単に使える管理システム これまでのバージョン管理システムとは違い、黒い画面になにやら記述しなくても、クリックするだけでファイルの履歴管理ができます。間違えてファイルを上書き保存

2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通

2014年6月28日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. ロゴ：昔と今じゃ全然ちがう有名企業のロゴ25選 「スタバ」「任天堂」「Apple」など この記事をRTする 2. ネタ：Twitterに裏技見つかる　隠しコマンド「上上下下左右左右BA」を押すと…… この記事をRTする 3. 画像：わわ、このGIFアニメすごい…！Best GIFs of 2014 この記事をRTする 4. ［速報］Google Appsで、Word/Excel/PowerPointファイル