ポートフォリオサイトに関する参考サイトリスト

事例集 LIG

Webデザインのポートフォリオ作品19例！未経験から転職成功した実例集

ポートフォリオ サイトの事例集 | Studio Showcase

作成ソフト

matchbox.work

www.foriio.com

SANKOU! | Webデザインギャラリー･参考サイト集

“グッド！”なポートフォリオが見れるサイト | GOOD PORTFOLIO

https://showcase.studio.design/ja/website/kanmi-design

テンプレート 集 figma

https://www.figma.com/community/portfolio-templates?resource_type=files&editor_type=figma&price=all&sort_by=all_time&creators=all

STUDIO

studio.design

https://preview.studio.site/templates/9xPORMpWrR

参考ブログ記事

デザインのクオリティを上げる、たった一つのコツ｜村田 俊英 / デザイナー

Figmaプラグインのおすすめ厳選14選！利用するメリットや入れ方も紹介 | 株式会社パンタグラフ

どんなデバイスでも美しく表示。崩れにくいレスポンシブを設定するコツ | Studio Blog

【イラレの生成AI】生成ベクターの使い方【Illustrator】 | 321web

https://www.amazon.co.jp/Photoshop-Illustrator-Firefly-%E7%94%9F%E6%88%90AI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%88%B6%E4%BD%9C%E5%85%A5%E9%96%80%E3%82%AC%E3%82%A4%E3%83%89-%E3%82%BF%E3%83%9E%E3%82%B1%E3%83%B3/dp/4815625107

参考にしたポートフォリオサイト

フクイジュリ

juri-portfolio.com

テストサイト

chromewebstore.google.com

Webデザイン制作の流れ

  1. 商材を決める ポートフォリオ
  2. 使用用途や目的を設定する クライアントに見てもらい、どういうことができるのか何をしてきたのか どういう人なのかを伝える目的
  3. ターゲットを設定する 仕事を依頼したいクライアントやはじめましてのフリーランスの人
  4. トンマナを設定する 柔らかい、落ち着いた、好きなものを詰め込んだ、本、散歩、自然、カフェ、ラーメン、海、温泉、登山、ローカルなど静止しているイメージの画像。 撮影した写真を使う。少しエモい感じ ブルー白、茶色、グレー

フォント：明朝体かマルゴシック 困りごとに寄り添う 3. ギャラリーサイトで参考となるデザインを探す 4. Illustratorでフライヤーを作成する

ディレクション (フラクタ)

外注を考えるときは、どんな時なのでしょうか？

  • リソース不足

  • 効率を上げたいとき

ディレクションとは

プロジェクト全体の監督業務

ディレクション(外注)するポイント

  • できるだけ具体的なコミュニケーションをする

  • 言わなかったことはやってくれない精神

トップページ内の本の画像を縦横比率を変えず、画像の切り取りもせずに、縦横それぞれ○ピクセルずつ小さく。 また、画像右側の商品説明欄の幅を

コミュニケーション

伝え方のフレームワーク

www.kaonavi.jp

ムードボード

QCDを意識して修正対応をしよう

クオリティ

旅館のブランディング

インスタグラム

  • トーンを統一する

  • カメラマン、スタッフに共有

  • 6枚を一枚のセットと考え、配置を考慮する。

おすすめアプリ

暖かい雰囲気の写真になる

‎「VSCO: 写真加工・動画編集アプリ」をApp Storeで

Unfold — 写真編集 & コラージュ

Unfold — 写真編集 & コラージュ

  • Squarespace, Inc.
  • 写真／ビデオ
  • 無料
apps.apple.com

言葉選びに使える。

具体的なプランが決まっているときは、pinterestでイメージを厳選させていく。

  • アンケート

NPSという方法で調査する

  • OTA

じゃらんなどの旅行サイトなどのOTAも店舗サイトと統一しましょう。

仕事を自分で作る！ 一緒に走ってくれるメンバーを育てることも大事。

shopiffyについて

shoppifyはDMには向いていない。

社内コミュニケーション

社内ツールでslackを使っている。

お客さんのお褒めの言葉を共有！

高齢の方には無邪気に接する。

  • mission/valueを決めよう

DX化の推進②　藤尾氏

中小企業はリソースが不足している。 社会を巻き込んでいくことが大事。 国の助成金など、利用できるものは利用しよう！

会社の中だけに目を向けるのではなく、 社会を味方につけよう！

長野では関係人口を広げる仕組みを取り組んでいる！

naganock

nagaknock.etic.or.jp

貿易についてサポートしてくれる www.jetro.go.jp

www.chusho.meti.go.jp

shinshu-100y.shinshu-u.ac.jp

www.kanto.meti.go.jp

動画② 本田先生

映像動画の共有

動画イメージの共有が大事です。 どのような動画にするか、参考動画を共有しましょう♪

動画広告の種類

短い時間でシリーズ化していく

動画のコツ

前後15フレーム(0.5秒)無音の時間をつけないといけない。

2022.11.15 HTML / CSS /Javascript 佐藤氏

スマホで見やすくしたいな〜✨

でも、CSSをいちいち書くのがめんどくさい…💦

CSSフレームワーク

一番有名なbootstrap！(JQuery , Vue.js など)

bootstrapを使って、レイアウトが予め定義されている。

尚且つ、レスポンシブ対応をしています。

さまざまなライブラリなどが用意されているので(カードやボタンなど)

コピーして簡単に使うことができます。

ボックスモデルという考え方をベースにしたフレームワークなので、

ワイヤーフレーム(下書き)を描く段階で、ボックスを意識しましょう！

メディアファイル

  • SVG ：ロゴに向いている

  • mp4：動画はyutubeに挙げてサイトに埋め込むのが主流。

バックエンド(サーバーサイド)が必要なこと

  • 情報を保存

  • ユーザーとコミュニケーション

CMS

今は、コードを１から買いで運用しているところはほとんどない。

WordPressなど

サーバーにインストール型という種類

  • XFree 無料　３ヶ月ごと

ウェブフォント

  • GoogleFonts 無料

色彩

色は不必要に増やさず、グレーを活用しよう！

ページレイアウト

ページ分割がなくなり、 スクロール型コンテンツが主流になっている 例　HACHIYA

8ya.jp

zakuzaku.co.jp