Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。

11月に入った後に「10月までで退職ってことにしてもらっていいかな」と言われたのが12年前のちょうど今頃でした。 今考えると、いや考えなくても結構ひどいっすね。 そんな流れでフリーランスになって丸っと12年たったわたしですが、今回13年目を迎えるにあたって一つ大きな転機もついでに迎えることとなりました。 続きを読む フリーランス13年目が会社員をはじめる理由

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークしておいて、PDFや画像をダウンロードして、すぐに確認できるようにしておくと便利ですね。

どうも、まさとらん（@0310lan）です。 今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。 以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版ではあるものの「Chromeブラウザ」からでも利用できるようになりました！ 【 Pingendo 】 「Pingendo」は、基本的にマウスでポチポチとクリックしていくだけで、簡単に見栄えの良いWebサイトが作れてしまう便利なサービスです。 また、中・上級者向けにソースコードもすべて編集可能になっているので、自分好みにカスタマイズすることも出来るのが特徴となっています！ ■基本的な使い方！ それでは、実際に「Pingendo」を使いながら、どのようなサービスなのかを見ていきましょう。 利用するにあたり、面倒な登録やインス

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ

日本語フリーフォントはたくさんインストールしているけど、かわいいデザインを作成するときに、どのフォントを利用するか迷ってしまったことはないでしょうか。 特に男性デザイナーにとって、女性らしい可愛いデザインを表現するのは至難の業とも言えるでしょう。また無料フォントでは、デザインコンセプトに合った、商用利用できる素材を探すのも一苦労です。 今回は、そんなデザイナーの悩みを解決する、無料ダウンロードでき、商用ライセンスにも対応した日本語フリーフォントという条件で、使いやすいアイテムだけを厳選してご紹介します。

Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different

「え？こんなものまで？」と驚くほどたくさん、それも親しみやすいタッチで統一されたイラストが揃うフリー素材サイト「いらすとや」が大人気。「日本が「いらすとや」だらけになってる」「イラストレーターの仕事を奪っているのでは？」との声が上がるほど、あちこちで使われています。 実際、「いらすとや」はWebデザインでも使い勝手がよく、とても便利。でも、案件によっては「競合サイトとイラストがかぶってしまう」「別のタッチのイラストが使いたい」といったこともありますよね。そこで、使い勝手のいいイラスト素材サイトを厳選して、各サイトの特徴をまとめてみました。 なお、商用利用可能なサイトの場合でも、グッズや再配布、販売目的での利用は禁止されていることがほとんどです。必ず各サイトの利用規約を確認してください。 「いらすとや」の作者が運営するゆるかわサイト『いらすとん』 http://www.irasuton.co

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン

公開前に知人に見せたら、読むのに20分もかかったわ！！ と、お叱りを受けましたｗ オススメのツールやWEBサービスということで50ほど紹介していますが、僕の使用感のほかに、ところどころ経験談的なものが入っています。そのあたり、読むのがめんどうな方は読み飛ばしていただければ幸いです。 2万文字近くあるので、お時間ある際にゆるりと読んでいただければと思います。 それではお楽しみ下さい！ サイト解析に使えるツール・サービス import.io Juicer Ptengine GTmetrix CLOUD FLARE wayback timemachine シミラーウェブ Open Site Explorer サクラサクLABO aguse Built with ディレクションに使えるツール・サービス ウェブチェッカー Cat Mdes maindmaister ひとりブレスト 関連キーワード取得

どうすれば「リッチな」印象のページになる？ ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない！ ということはありませんか？ 今回は、「可愛らしい」「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる！ というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行

Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今