僕がプログラミングを始めてから2年8ヶ月が過ぎました。 今までは基本的にフロントエンドをメインに取り組んできましたが、勉強しているうちに興味が移り、今後はバックエンドに方針転換するつもりです。良いタイミングなので、今までの取り組みを振り返っておこうと思います。

「ワイド」や「スタンダード」などは、比率を表す通称です。3:2以外は通称で呼ばれることも多いので覚えておくと良いでしょう。 ブログの画像としては、以下のような比率が一般的です。 アイキャッチ画像 16:9／3:2／1:1.618 見出し下の画像 4:3／3:2／1:1.618 ブログ記事の場合、縦幅が長すぎるとスマホで表示した際に圧迫感が出てしまい、読者がストレスを感じる原因になります。逆に横幅が長すぎると、画像が縮小されて視認性が下がってしまうので注意が必要です。 上記の例を見て分かる通り、画像の比率によってブログ記事の印象は大きく変わります。 ブログ記事の要は画像ではなくテキストなので、画像と本文のバランスが取れるように調整しましょう。参考画像の中央（緑色）のようなバランスにするのが理想的です。 画像の比率を統一するメリット 画像の比率を統一すると、ブログのトップページで記事一覧が表示

スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。See the Pen CSS Menu Icons by Naoya (@

体を動かすこと全般が大好きなシステムデザイナー/ディレクターの今井です。 体の老化を感じて昨年の11月からジムに通いだしたのですが、一昨日ジムに行って「デッドリフト」というバーベルを床から持ち上げるトレーニングを行った時に、正しい姿勢で上げることができず腰を痛めてしまいました。 筋肉の衰えとバランスの悪さなどが怪我の原因だと思うのですが、こんなぐらいで簡単に怪我してしまうほどに老化して体力が衰えているということを痛感しました。 40歳を越えてから老化と体力の低下が著しいですが、まだまだ動ける体力をキープしたいので、諦めずトレーニングを続けたいと思います。もう少しトレーニングについていけるようになったらブログでも紹介したいと思いますので、お楽しみに！ って誰が興味あんねん！ 話は変わって、代表の谷川の記事でも紹介していますが、昨年に「Webグランプリ」というデザインアワードに応募し、企業グラ

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめました。 これらの技術はデザインに沿ってコーディングをする以上のものになります。 実務では工数が掛かるためあまり行われず、知っていても使う機会は少ないと思いますが、それでも抑えておくと自身のWeb制作への理解が深まると思いますので、興味のある方はご一読下さい。 それではいきます。 はじめに制作にあたり、複数のプラグインやライブラリを使用しています。 Webサイトで使われるプラグイン(ライブラリ)の多くが海外製となっており、最近ではIEを非対応としたプラグインもあります。 特に最近の制作環境の主流である

背景画像をズームアップしながらフェードで切り替えるスライダーを実装する Swiper自体にはズームアップしながらフェードする機能がありません。そこでCSSを使ってズームアップ機能を追加します。 Swiperのファイルを読み込む 今回はCDNを使ってSwiperに必要なファイルを読み込みます。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 背景画像１ --> <di

これまでのInstagram APIが廃止されてInstagram Graph APIに置き換わることで、対応に追われている方も多いのではないでしょうか。2020年初頭にはこれまでのInstagram APIが廃止されます。ホームページに旧インスタグラムAPIで投稿を埋め込んでいた方、特にビジネスでスマホ集客やインスタ集客をしていた方は新しいInstagram Graph APIへの切り替えは急務です。 そこで、新しいInstagram Graph APIを使ってウェブサイト上にインスタグラムの投稿を表示するまでの手順を、なるべくわかりやすい方法で紹介します。 可能な限り複雑な手順を省いていますので、ほぼ設定を追っていくだけでアクセストークンとインスタグラムビジネスアカウントIDまで取得できると思います。 後半ではサンプルコードやスタイルシートを用いてホームページに埋め込む方法や、デザイン

レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ

<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww

以前、Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！という記事を書いたことがありました。 この記事、Arrownの歴代記事の中でもかなりのバズを生み出してくれたのですが、今回のブログ記事は、1年越しの続編の記事になります！（遅い！笑） Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！ でご紹介させていただいたように、2018年4月、それまで提供されていたInstagram APIの一部機能が終了したことにより、Webサイトに埋め込んでいたInstagramの写真が突然表示されなくなってしまったということがありました。 昨年2018年の段階では、Instagramを運営するFaceBook社側からは、「Instagram APIの代替方法につい

前にInstagramの埋め込み方法としてInstaWidget（インスタウィジェット）を使った方法をアップしましたが、なんと、インスタウィジェットは使えなくなってしまいました…(ﾟoﾟ;; 記事を取得できませんでした。記事IDをご確認ください。 ですので、インスタウィジェットとは別でInstagramをワードプレスに埋め込む方法の、【SnapWidget（スナップウィジェット）】を使った埋め込み方法を分かりやすく図解入りで解説します。 と早速お伝えしていきたいのですが、わたしは、ブログとSNSをうまく連携させて、マネタイズ設計をしているプロになります。 ですので、今回の記事では、ブログとインスタの連携のおすすめ場所についてもしっかり解説していきますので、最後までお読みくださいね！！ 【SnapWidget（スナップウィジェット）】は、良いツールですが、結構仕様変更による不具合やアカウント

最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。 例えばこういうのです。 https://tympanus.net/Development/BlockRevealers/ シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。 実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。 プラグイン「Block Reveal Effects」を使う方法 先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。 まずは以下のページの「Download source」から一式ダウンロード可能です。 https://tympanus.net/codrops/2016/12/21/block-reveal-effec

この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット（英: Snippet）とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ローディングアニメーション系 7. SVGアニメーション系 8. 便利、面白系スニペ

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。

という気になる疑問から考えてみます。 これは、在宅で働くWebデザイナーがどの程度収入を上げているか、国が公式に発表している数字は存在しないため平均などを表すことはできません。 そこで、たとえば具体的にWeb制作ってどんな料金で仕事を受けているの？というところから見てみると大体のイメージがつくのではないでしょうか。 以下はこれまでの私の経験で算出してみたWeb制作のおおよその値段です。 フリーランスの初心者を基準で算出していますので実際はもっと多い場合も少ない場合もありますが、まずは参考までにご覧ください Web制作料金 トップページデザイン：50,000円／1ページ 第2階層ページデザイン：15,000円／1ページ トップページコーディング：30,000円／1ページ 第2階層コーディング：8,000円／1ページ バナー制作：5,000円／1点（小〜中サイズ） ※後ほど解説しますが「コーデ

この記事は、「BASE Advent Calendar 2018」の21日目の記事です。 devblog.thebase.in はじめまして。2018年2月にBASE株式会社へデザイナーとして入社した小山です。 技術ブログを書くのは初めてなのですが、今回は私が2月に入社してから今日までネットショップ作成サービス「BASE」で「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話について書こうと思います。 入社当時の状況 私が入社した当時、デザインチームは人数が増え始めた時期で、大きな課題が2つありました。 デザインデータの管理 私が入社する前まではプロダクトに対してデザインデータを作るデザイナーが少なく、各デザイナーが個人のローカルでファイル管理をしていました。その為、誰がどの画面のデザインデータを持っていて、最新のデータがどれなのかを毎回メンバーに確認をして

業務システムなど、SPA（シングルページアプリケーション）の技術が主流となり、AngularとReactの両雄が主要どころではありますが、どちらも嫌いという人も少なくはありません。 主な理由としては、Angularは難しくて学習コストかかるし、Reactは制限付きBSDライセンスの問題もあって会社での導入は法務部が難色を示すとかの理由で避けたいといったところでしょうか。 そうなると３番手ということでVue.Jsでしょ。 Vue.jsもvue-routerとかのライブラリを使えばSPAを実装できます。 Vue.jsの管理画面デザインテンプレートも数は少ないけど、あるにはあります。AngularとReactの管理画面デザインテンプレートを紹介したのだから、せっかくなのでVue.jsも紹介しちゃいます。 Vue.jsの有料テンプレートはLaravelでバックエンドもセットになっているものも結構あ

Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。 私と同じような誰かのお役に立てれば幸いです。 私がよく使うリダイレクトは301リダイレクトのため、この記事のコードは全て301リダイレクトとなっています。302リダイレクトを用いる場合は、適宜変更してください。 0. .htaccessとは？1.あるURLから別のURLへのリダイレクト2.ディレクトリまるごとリダイレクト3.類似したファイル名のURLをまとめてリダイレクト4.特定のディレクトリをリダイレクトから除外する5.特定のファイルをリダイレクトから除外する6.wwwなし / ありを統一する7.https(SSL)のURLへリダイレクトまた、上手く動作しない場合のパターンも挙げてみまし