サイト制作

サイトが重いときに!画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】
投稿日:2018年11月9日

Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。私も試したことはありますが、画像がパッと出てきて画面がガタついたり、jQueryをいじらないとカスタムしにくかったりと、思った通りの動きを ...

【Illustrator&Photoshop】CC 2019 アプリケーション登場 試してほしい8つの新機能!
投稿日:2018年11月2日

2018.10.16にリリースされた IllustratorとPhotoshop CC 2019を早速使用してみて 便利だなと感じた8つの新機能をピックアップしてご紹介したいと思います。 (ほとんど職場でメインで使用しているPhotoshopの話になります) いろんなブロガーさんが ...

SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]
投稿日:2018年7月20日

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめ ...

もう悩まない。CSSでレスポンシブなtableデザイン&コーディング
投稿日:2018年7月17日

もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることがで ...

超~かんたん!誰でもできる人物レタッチ【Photoshop】
投稿日:2018年7月17日

5分でできるレタッチ?! Photoshopで誰でも簡単にできる人物写真のレタッチ方法をご紹介します。 参考として「美容系サイトのメインビジュアルで使用する人物写真」のレタッチを行っていきますが、採用サイトやLP制作など様々な場面で使えると思います。 レタッチ作業は時間がかかるとい ...

自社ホームページリニューアル完了~自慢まとめ(笑)~(社長日記 2018年7月)
投稿日:2018年7月4日

5月のブログで記載した通り自社ホームページのリニューアルが完了しました。 今回も非常にスピーディーにリニューアルができました。 さすがプロですね(笑) BRISKのホームページは、ありそうでなかなか無い、非常にいいホームページになったと自負しています。 どこがいいか自慢したいと思 ...

【画像大量保存&リネーム】ImageDownloaderとFlexibleRenamerの合わせ技【ページ量産案件に便利!】
投稿日:2018年5月23日

一時期、大型案件のページの量産ばかりしていました!需要がどれほどあるかわかりませんが、今回は画像が豊富なページの量産時にとっても便利だったツールをご紹介したいと思います。 ↑こんな時。 最初は自らをロボット化し大量に画像を保存する簡単なお仕事をしていたのですが、その際の量産対 ...

【サーバー】LAMP環境構築について纏めてみました。(FTPの設定も)
投稿日:2018年3月12日

BRISKはウェブ制作会社ですので、レンタルサーバーを契約してサイトを制作するわけですが、 最初からLAMP環境などが整っているレンタルサーバーを契約すると便利な面も多々ありますが、 半面自由度が低くなる部分もあります。 自由度やセキュリティなどの関係で、OSだけ入った新規のサーバ ...

コスパ最強のプラン、はじまります。
投稿日:2017年12月27日

今回、東京の中小企業様限定で『コスパ最強のプラン』を新しく作りました。 このプランでは、Webサイト制作とそれに使用する写真素材の撮影も行うという内容でかなりコスパが良いものになっております。 BRISKでは「レスポンシブプラン」というものがあります。パソコン、スマートフォンに対応したレ ...

【コンバージョンアップ!】見積もりシミュレーションでお問合せアップ!
投稿日:2017年11月10日

ホームページのお問合せを獲得する方法として 最近では良いコンテンツを作るというのが重視されています。 コンテンツマーケティングという言葉が独り歩きをしSEO対策で 質の低いコンテンツやコピーコンテンツを量産した事で検索エンジンも質の低いコンテンツの精査を始めています。 BRISKでは ...

WordPressで定期的に処理をさせる!WP-Cronの設定方法
投稿日:2017年9月5日

WordPressにより構築されているサイトで、定期的に何かの処理を実行したい、ということがあるかと思います。 例えば、毎日午前2時に定型文の投稿を下書きを作っておく、という処理をさせたいというケースを考えます。 システムに詳しい方だと「自動実行」といえばすぐに「cron」機能が思い ...

[jQuery]スクロールに応じてホワッと表示させる効果(スクロールエフェクト)を簡単に実装する
投稿日:2017年6月29日

サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。 そんな効果をスクロールエフェクトと呼びますが、あまりゴテゴテした動きをつけると逆にサイトが読みづらくなるときもあるので、サイトのコンセプトに沿ったエフェクトを選択する必 ...

[jQuery]タブ切り替えをプラグインを使わずに自前で実装する
投稿日:2017年6月26日

タブ切り替えを実装したいときに、jQueryのブラグインを利用するやり方もありますが、タブ切り替えくらいならプラグインを使わずに、自前で実装したほうがいろいろと軽快です。 js部分だけだと6~7行で記述できてしまいます。 ちなみに、このページのタブ切り替えは自前で作ったjsです。 ...

イラストレーターでのさまざまなスライス方法まとめ[Illustrator]
投稿日:2017年3月31日

いきなりタイトルを裏切りますが、まずはaiファイルをPhotoshopで開くというのを試しましょう。 "ファイル" → "書き出し" → "書き出し形式" でpsdを選択して書き出しします。 書き出しオプションはWeb用(カラーモード:RGB / 解像度:スクリーン)に設定。 レイヤー ...

自社ホームページで、スピード評価「PageSpeed Insights」の点数を上げた話
投稿日:2017年3月27日

ウェブサイトの表示スピードを評価してくれるWebツールの一つに、PageSpeed Insightsというものがあります。 Googleが提供しているサービスですので、このツールでの評価はけっこう重要になってきます。 「PageSpeed Insights」での点数を何点以上にしてくださ ...

【WordPress】管理画面で、タクソノミーやカスタムフィールドの列を追加する(ソート機能付き)
投稿日:2017年2月27日

WordPressのカスタマイズをしていて、管理画面の投稿一覧の使い勝手も向上させたい!と思う時ってありますよね。 ポイントとなる項目を一覧で見ることができるだけで、かなり管理画面が便利になりますが、それにソート機能や絞り込み機能をつけることができると、なお良いですよね。 そこでこの ...

web制作でのエピソード2016
投稿日:2016年12月27日

どうも城戸です。 突然ですがBRISKには、営業マンはいません。 ホームページから頑張って集客し お問い合わせが来たらだいたい私がヒアリングに行きます。 勝率は50%という所でしょうか。(お問い合わせを頂いてからの営業なので比較的高めだと思っています。) 2016年もそろそろ終わり ...

WordPressの引っ越しに必須のツール「Database Search And Replace Script IN PHP」【公式推奨】
投稿日:2016年12月22日

すでにインストールされているWordPressの引っ越しをしたい、ということは時々あると思います。 ここでいう引っ越しには、物理的なインストール場所の変更だけでなく、ドメインが変わるとき(テストドメインから本番ドメインへの切り替え時など)、SSL対応によりプロトコルが変わるとき(http:// ...

~2016~クリスマスのWebデザイン10選+おまけ[雪を降らせるjQuery]
投稿日:2016年12月20日

みなさんいよいよ2016年も年の瀬、いかがお過ごしでしょうか? 少し前にクリスマス関連のページ制作とバナー制作をしましたが、意外と参考が見つからなかったので今回探してみました。 クリスマスのWebサイトを作成する際にきっと役に立つおまけ付きでご紹介します。 Marunouchi Bri ...

デザインツールから、HTMLコーディングのスピードアップを考える [Photoshop] [Illustrator] [Creative Cloud Extract]
投稿日:2016年12月14日

最近Photoshopの「CSSをコピー」が結構使えるなということに気づき、他にも知らなかった便利な機能があるかもと調べていたところ、Adobeのびっくりサービスを発見。 「CSSの生成」と「スライス」について、コーディングがスピードアップしそうなデザインツールの機能をまとめました。 ※ ...