強面の社長が教えてくれた人たらしテク | コムテブログ
地元の知り合いに人たらしのプロみたいな強面の社長さんがいた。風体はオールバックで髭を生やしがっちりしている。一見、一般人には見えない。 最近 SNS で見かけるような、インテリぶった貧弱そうな（男か女か分からないような）経営者ではない。背中に刃物を突き立てられても動じないような人で、事実開き直っていた。しかし何をやっても上手くいく強運な人だった。 最近連絡を取っていなかったが、その人に教えられた事を公開しようと思う。毒舌で失礼な文章なので気分を害しそうな人はスルーして下さい。 「飲み会不要」 付き合いが大切だと言う人間とは距離を置け。懇親会も出来るだけやんわりと断れ。人間関係は大切だが、賢い人間は皆が飲みに行く時間に不労所得を作る。 「成功者と失敗者の話しは聞くな」 すでに成功している人間や、うだつのあがらない人間の話はどうでも良い。それより頑張り屋さんに近づけ。実は頑張り屋さんに近づくと
2018年に使いたいWebデザイントレンド ！ファーストビューのアイデア集
作成：2017/09/11 Webデザイン > 「提案されたものの、このレイアウトよく見るんだよなぁ」とクライアントさんに思われないように個性を出したい。今回は2018年も使える「遊び心を加えた」Webデザイントレンド、ファーストビューデザインのアイデアをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 近年増えてきたファーストビューのレイアウトは スプリットスクリーン（分割） シネマグラフ 縦書きのGナビゲーション 画像とテキストを一部だけレイヤー 不規則な配置 アニメーション 鮮やかな配色のグラデーション デュオトーン イラスト ラインアート といった感じなので、今回はこのあたりから少しだけ遊び心があるものをまとめます。 スプリットスクリーン なぜかファーストビューがパッとしない時があります。要因の一つとして写真が抽象的（主張がない）で、フルスクリー
404エラーページをデザインする時に取り入れたい洗練されたエフェクトとギャラリー集
作成：2016/12/26 更新：2016/12/26 Webデザイン > ページを消した時やリンク切れなんかで、味気ない404ページが表示されると悲しくなりませんか。というよりもユーザーは確実に離脱してしまうでしょう。あまり目立たないページだからこそ、手が込んだレイアウトになっていると感動します。 デザインが普通でも、検索窓や内部リンクがあると好印象。今回は404ページを作る時に参考になりそうなギャラリーやエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 404ページとは 404ページとは、ページが存在しない旨を伝えるエラーページのことです。ステータスコード200 OKは「リソースが正常」という意味で、ページが正常に表示されていることを示し、300番台はリダイレクト、400~500番台はエラーであり、404は「リソースが存在しない、探したけ
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 - コムテブログ
TL;DR ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き background-clipプロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent; 指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。 .foo { -webkit-ba
全部無料の「人物」に関するイラスト素材まとめ
作成：2016/09/20 更新：2016/09/20 Webデザイン > 最近、キャラクターを用いるWebサービスやブログが多くなってきましたね。今回は「人物」だけにフォーカスをあてて、プレゼン・ブログなどに使える商用利用可能の無料イラスト素材をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 ガーリー 色使いがふんわりしている女の子系の可愛らしいイラスト素材。ショッピングやソファ・歩くなど日常的な素材がある。 ガーリー 線画 線画であればこちら。人物は4人家族・リオのカーニバルなど。数こそ少なめだがクオリティ高し。 Line illustration labo 整体院 整体院などで使える素材。肩こりや腰痛などの症状でカテゴリ分けしてあるのが面白い。会員登録が必要。 からだピクチャー 看護師・工事現場作業員・配達員など チラシやポップにも使えそうな癖の
意外と盲点だったCSS3の役立つ小技まとめ - コムテブログ
TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ
さりげなく使える、Webデザインの参考になるサイト集
作成：2016/04/11 更新：2016/06/29 Webデザイン > ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。 エンジニア速報は Twitter の@commteで配信しています。 一部にグラデーションを使って視線をフックさせる 複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。 そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。 INUPATHY こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。 株式会社ジェイ・シー・エス
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
すごく助かった！Webサイト制作「受注前」に知っておきたい知識
作成：2014/03/3 更新：2014/11/01 ディレクション > よいデザイナー、プラグラマーになるためにはディレクション能力やPMも学んだほうがいいと言われたことがあります。ベンチャーにいると自分もそう思います。 PM＋ディレクション歴10年の人に教わった受注前に気をつけるべきことなどをメモしておきます。フリーランスの人も参考にしていただけたらと思います。今回は基礎編となります。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 問い合わせ対応 １．カスタマイズされているか確認 ２．サーバーについて聞く ヒアリング ３．ヒアリングシートに追加しておきたいこと 見積もり ４．見積もりの書き方 企画提案 ５．企画提案書（Web制作版）の書き方 ６．印刷は2upか4upで 強み・実績・事例 ７．アピールポイント 受注 ８．受注契約＋着手金 ９．要件定義 管理
Webデザイナー必見、実務で役立つ逆引きレイアウト集
作成：2015/07/21 更新：2016/06/29 Webデザイン > オシャレなレイアウトやユーザーが使いやすい配置を実現するには、どのようなことに気をつければよいのか。クライアントの要望に合わせてアイデアを出したいとき、レイアウトで困った時に読んでおきたいメモ。イメージが湧きやすいように、国産サイトを多めにピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．視線を停止させたい ２．上質さを出したい ３．静寂さを出したい ４．親しみやすさ を出したい ５．文字の存在感を出したい ６．メリハリを出したい ７．先進的な演出をしたい ８．広がりを出したい ９．メッセージを目立たせい １０．要素を上手に対比させたい １１．ラインをオシャレに使いたい １２．躍動感を出したい １３．ハッキリ見せたい １４．シンボル・ロゴを目立つ位置に配置した
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識
作成：2014/02/3 更新：2014/11/01 ディレクション > 提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイトリニューアルの提案 自社分析によるサイトの問題点とその解決策 見やすさ、管理しやすさへの主な工夫 サイトレイアウト案（トップページ） フロント画面＋管理画面 イメージ 保守＋運用 セキュリティ面でのご提案 バックアップと緊急時の対応 サイトマップ案 強み、実績、事例 スケジュール サイトリニューアルの提案 企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。 自社分析によるサイトの問題点とその解決策
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
