旅するように生きることを目標にしているWebデザイナー＆フロントエンドエンジニア。Web界隈のことやライフハックを発信中。
大阪→東京→湘南
ポートフォリオサイトはこちら
http://mako.red
デザイン
マウスストーカーといい、最近はマウスに追従し、コントローラーかのようにカーソルを実装するのが流行っています。 今回のサイトは全てがマウスストーカーを使った操作となっており、シンプルでとてもわかりやすいサイトです。 The …
デザイン
いつもどうやったらこんなデザインが出来あがんだよっってくらいイケてるデザインをご紹介する”Webデザインに舌鼓をうつ”シリーズ。 今回は制作物をとても魅力的に見せる、店舗設計/オフィスデザイン会社のコーポレート＆ポートフ …
コーディング
今年のエイプリルフールは休日です。 休みの日に出社しなくてもいいように、特定の時間が来たら表示して、終わったら消す。 そんなソースコードを紹介します。 時限式で実装できるのでとてもおすすめです。 <section …
デザイン
いつもとは全く違うテイストのサイトをお届けします。 なかなか和風のサイトでここまで尖ったデザインは見ませんでした。 これまで紹介してきたホームページはターゲットが若年層でした。 ただ今日ご紹介するサイトは50代から60代 …
コーディング
下手にPhotoshopで加工するよりinstagramの方がいけてる時あるよね正直。 デフォルトであるフィルタセットを使った方が、風合いが出ていいなって。統一感出すの簡単やし。 そんな時のCSSフィルターセットのIns …
コーディング
今日はいつもWordpressを作った後に追加で言われるやつ。 新着記事のみ”NEW”をとかラベルをつけてってやつです。 表示する日数も任意で変更が可能です。もちろんテキストだけではなく画像での表示も可能です。 これから …
お役立ち
ある日、ブログを書いていたけど歯医者に行く時間が迫ってました。めっちゃ区切りが悪いのでどうしても記事を公開したかった。 ふだんは使わない音声入力を移動しながら試してみたところ、下書きがとても便利だったので優越感に浸ってま …
お役立ち
去年、習慣を大きく変えるためにブログを書くことを掲げました。 そして確認することができた。 ”アウトプットを前提としたインプットは質が上がる”ということをお伝えします。 当初、デザイン向けのブログを書く気はなかった 20 …
デザイン
新しいUI/UX体験をさせてくれるサイトを紹介します。 ここ近年、WebデザインでCSSを使って3D表現ができるようになってきています。 スクロールしたらナナメから奥行きを持って出てくる そんなサイトを紹介します。 BL …
コーディング
テキストにとてもインパクトを与えることができるJavascriptを発見しました。 その名もBlotter.jsです。 読み込んでテキスト打ち替えておしまい。超簡単。 Blotter.jsをダウンロード 公式サイトはこち …
デザイン
インタラクションの参考はWebでは限界があるのでVimeoを見るようにしています。 2018年に入ってから気になったモーションを紹介します。Webに使える幾何学モチーフの作品が多数です。 Web制作でもインタラクションの …
デザイン
国内外の動画を魅力的に見せるサイトを集めました。 動画は必ずしもメインビジュアルにだけ使われるものではなく、UXを効果的に見せる手法としても使われます。 どこでどのように使われているかに注目して見て見ましょう。 前半は海 …
マーケティング
逃げちゃダメだ逃げちゃダメだ逃げちゃダメだ。 デザイナーはマーケティングで使用される数字や、KPIを設定するとなるとアレルギー反応がおきる。 ってことで、マーケティング用語のややこしい省略英単語をまとめました。 SNSが …
デザイン
これはまた派手なアニメーションを付けたなーって思う、デザインでのトータルブランディングの老舗、BEES&HONEYさんが新作だしました！ 毎回コーポレートサイト案件リニューアルの参考にさせてもらっています。 E …
デザイン
Webっぽいけどプロダクトっぽい。 そんな制作会社のポートフォリオを見つけました。 http://presnt.jp/ presnt http://presnt.jp/about 淡いブルーが爽やかなコーポレートサイトで …
コーディング
とっても便利なススクロール系Jsを発見しました。 しかもMITライセンスときたら、使わせてもらうしかない。 では手を合わせて。いただきます。 SCROLL MANAGER とりあえず見てもらえるとわかります。 アニメーシ …
コーディング
かなり強気なタイトルですが実際に最近の案件でSwiperというjavascriptのプラグインを使っております。 もう現場ではSwiper.js以外のJsは必要ないと思います。 Swiper.jsの特徴 Swiperの特 …
デザイン
アディダスのサイトはいつもかっこいいですね。 スニーカーのブランドで一番好きなんはReebokなんやけど、サイトでゆーたらアディダスが一番かっこいい。 このサイトを制作したResnという制作会社はとっても有名。 ニュージ …
お役立ち
今年前半はとても開発に力を注いだ。そして後半は複業に力を注いだ。 にしても本当によく働いた年でした。 そこで今年、僕がWebサイト制作のチーム開発をやる上で使っていたツールを紹介します。 エディターソフトの好みはエンジニ …
コーディング
表題の通り、固定ページに投稿の一覧を取得するテンプレートタグは、 使用頻度が高いのに思い出せないので僕のための備忘録です。 テンプレートタグ：固定ページに投稿記事一覧を表示する 使い道：固定ページを作った際に、archi …
デザイン
無名だった制作会社がいきなりCSSDAとAWWWRDSをかっさらいました！ ずっと紹介したかった。 立体感とシズル感がすごいサイトがやってきました。 SUPERCROWDS 制作会社：SUPERCROWDS 制作：SU …
マーケティング
2017年も残りわずか。来年の目標を立てる時期ですね。 今年もGoogleは適切な検索結果を表示するためにたくさんの施作を行いました。 SEOというワードそのものは、割とポピュラーになっているのではないかな。 Googl …
マーケティング
2017年12月6日水曜日、グーグル公式ブログから医療や健康に関連する検索結果の改善について、日本語検索アップデートに関する記事が公表されました。 今回は少し前に問題になっていた、DeNAのWELQ、ヘルスケア大学がたた …
デザイン
今年もあとわずかになってきました。そろそろ今年つくった記事をまとめはじめています。 今年もいろんな制作会社のポートフォリオサイトのリニューアルがありました。 そこで僕が一番衝撃を受けたコーポレートサイトのリニューアルを紹 …
コーディング
wow.jsを使うととても簡単にスクロールアクションを設定できます。 スクロールを着火させるためにwow.jsでトリガーを設定→animate.cssを使ってアニメーションを設定。 この方程式は2年くらい使い続けています …
コーディング
僕が使い慣れている、一番簡単なパララックスのjqueryのプラグインを紹介します。 パララックスを使う理由 写真素材をもらってからの制作依頼はとても多いでしょう。 だから、できるだけ写真素材がいろんな角度から見えるように …
コーディング
スクロールのスピードはjaueryを使って調整することができます。リッチに見せるための表現技法としては古くからありますね。 スクロールのスピードを調整すると文章をじっくり読ませることができます。 コピペして使えるjque …
デザイン
Webデザインに舌鼓をうつvol.4はトレンドを全部押さえたサイトを紹介します。 このBOTANISTというシャンプーは、あなたもドラッグストアで一度は見たことがあるのではないでしょうか？ 今やどこにでも売ってるバスブラ …
コーディング
WordPressのテーマ変更と時期を同じくしてサーバーの移管をしました。 当ブログをロリポップからエックスサーバーに変更しました。おめでとうございます！！ 巷ではエックスサーバーは安定しているかつ、高速と言われています …
デザイン
ホームページのデザインを注意して見たことがないあなたに贈る、Webデザインに舌鼓を打つシリーズも3回目になりました。 このシリーズを通してWebデザインの見所についてお伝えしていけたらと思います。 これまであまり意識して …
